{"componentChunkName":"component---src-templates-post-js","path":"/blog/marry","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","tips":[],"categories":["think"],"datetime":"2020-07-10 20:08:10","noFooter":false,"description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","plainTextDescription":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='128'%3e%3cpath%20d='M0%2064v64h401V0H0v64m104-54l-24%207c-19%203-18%203-18%205%201%201%200%202-1%203-2%200-1%201%202%2013l8%2027c2%2013%202%2014%205%2014l2%202c0%201-1%202%2013-3a353%20353%200%200141-12l1-2c2-2%202-3-2-16-3-7-6-19-7-26-2-12-3-13-5-13l-2-1c-1-2%200-3-13%202m7%203l-8%203%201%208%201%208h4c12-2%2014-3%2014-5a238%20238%200%2001-4-16l-8%202m-20%203c-8%202-7%202-6%2010l1%208-2-7-1-8c-1-1-16%201-18%203l2%208c1%209%201%209%204%209%202%200%202%200%200%201-2%200-2%201-1%2010%202%209%203%2010%203%201%200-3%200-6%201-5h1l1-3c1-2%205%201%204%203%200%201%201%202%203%202l4%204%202%204-1-4c-1-11-2-15-4-15l-6%201-5%201%206-2%207-2h1c0%203%201%200%202-4%200-7%201-10%203-10l3%202c0%202%201%203%204%203%205%201%204%201%203-6-1-6-1-5-11-4m111%206v43l1%2042h48V22l-24-1-25%201m76%206l-2%204-1%201c-2%201-2%202-2%205l1%205h12l1-4c0-4-3-11-4-9h-1c0-3-3-4-4-2m-158%203l-4%201-5%201c-6%200-5%200-4%208l3%2010v-8l3-4c1-5%202-5%207%200%203%203%204%204%204%206-1%202%200%203%201%203%202%200%201-3-2-16l-1-2-2%201m105%201l-5%201c-4-1-4-1-5%202%200%202-1%204-3%205-3%201-3%201-3%207l-2%2010v8l1%208v4l1-3%203-6%203-3c3%200%203-4%200-7-1-2-2-3-1-7%201-6%204-12%205-10h3c2%200%203%201%201%204-1%201%200%202%201%203l2%203c-1%201%200%203%201%205l4%208c0%205%204%2018%205%2019%200%201%203%200%205-2l5-3-1-6%201-10v-8l-3-10c0-3-1-5-2-5l-1-2-2-2-6-2c-3-3-5-4-7-1m119%2015c-2%204-2%204%2012%203%2012%200%2018-1%2010-1-2%200-3%200-2-1%200-2-3-3-13-3-5%200-7%200-7%202m-66%203l-2%204-2%203-1%205c0%202%200%202%208%202h7l-1-4c0-5-3-8-5-7l-1-2c1-3-1-3-3-1m-161%201l-8%201%204%2017%2017-3-2-9c-1-9-1-9-11-6m252%201c3%202-2%205-6%205-5-1-6%200-5%204%200%204%201%205%203%204v-2l9-1c9%200%2011-1%2011-2%200-3-2-4-7-4-3%200-4%200-3-2%200-2%200-3-2-3v1M99%2054l-8%201v6l1%206-1-6-2-5-17%203%202%209c1%208%202%209%203%209l8-2%208-3h1l1%201v-1l1-4v-3l4-7%201%202c0%202%200%202%202%202%201-1%205%202%205%203l2%204c1%201%201%201%201-3l-4-14-8%202m178%2017c0%202%200%202-1%201-1-2-3%205-3%2011%200%201-1%202-3%202-3%201%2010%201%2015%201%202%200%203%200%203%202h1c1-2%207-3%209%200l3%201v-1c-1-2%200-2%202-2s3%200%202%202l1%202c1%201%201%200%201-1%200-3%200-3%205-3l-9-1h-15l-1-4-3-5c-2-1-2-1-2-3%201-1-1-4-3-4l-2%202m3%2025c1%202-2%204-7%205-5%200-5%200-5%203v3h49v-4l-1-3c-2%202-18%200-18-2l-1%201c-2%204-6%202-7-2-1-3-1-3-1-1v3c0%202-1%201-2-1l-3-1-3-2c-1-1-1-1-1%201m55%200l-1%206v5h49V96l-24-1-24%201m-206%2013v3l-1%203v1l1%202%201%202%201-3c0-2%200-3%201-2l1%202c0%202%201%203%203%203h4v-12h-3c-4%200-4%200-4%203%200%202%200%203-1%202l-1-1-1-4-1%201m14%201v9l1-3%201-2c2%201%202%203%201%205-1%201-1%201%201%201%202-1%203-1%203-3l1-3%201%203c-1%204%201%203%202-1%201-5%200-8-3-8-1%200-2%201-2%203l-1%203v-3c0-4-5-4-5-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.1218905472636815,"src":"/static/6701d75556a4650d2381158d8d4b0b71/0ea4e/banner.jpg","srcSet":"/static/6701d75556a4650d2381158d8d4b0b71/9e575/banner.jpg 500w,\n/static/6701d75556a4650d2381158d8d4b0b71/79449/banner.jpg 1000w,\n/static/6701d75556a4650d2381158d8d4b0b71/0ea4e/banner.jpg 2000w,\n/static/6701d75556a4650d2381158d8d4b0b71/4f9b6/banner.jpg 2510w","srcWebp":"/static/6701d75556a4650d2381158d8d4b0b71/e1a1e/banner.webp","srcSetWebp":"/static/6701d75556a4650d2381158d8d4b0b71/7fe04/banner.webp 500w,\n/static/6701d75556a4650d2381158d8d4b0b71/d619e/banner.webp 1000w,\n/static/6701d75556a4650d2381158d8d4b0b71/e1a1e/banner.webp 2000w,\n/static/6701d75556a4650d2381158d8d4b0b71/ed022/banner.webp 2510w","sizes":"(max-width: 2000px) 100vw, 2000px"}}},"bannerCredit":null,"slug":"/blog/marry","tags":["美好"]},"headings":[{"value":"〇、目的","depth":2},{"value":"一、电子相册","depth":2},{"value":"二、电子相册","depth":2},{"value":"2.1 预览 + 高清图片处理和压缩","depth":3},{"value":"2.2 图片列表的 Gallery","depth":3},{"value":"2.3 点击放大的 LightBox","depth":3},{"value":"三、祝福墙","depth":2},{"value":"评论过滤","depth":3},{"value":"四、最后","depth":2},{"value":"五、微信开放平台不吐不快","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"marry\",\n  \"title\": \"💒 结婚撸个相册 🎈🎉💖💗💕💘\",\n  \"date\": \"2020-07-10 20:08:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"看到自己的爱人穿上婚纱的样子，心里藏不住的开心\",\n  \"categories\": [\"think\"],\n  \"tags\": [\"美好\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst NoShare = makeShortcode(\"NoShare\");\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst Device = makeShortcode(\"Device\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(NoShare, {\n    mdxType: \"NoShare\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u7B2C\\u4E00\\u773C\\u770B\\u5230\\u5979\\u7A7F\\u5A5A\\u7EB1\\u7684\\u6837\\u5B50\\u7684\\u65F6\\u5019\\uFF0C\\u8BF4\\u4E0D\\u51FA\\u6765\\u7684\\u60CA\\u5947\\uFF0C\\u771F\\u7684\\u592A\\u7F8E\\u597D\\u4E86\\uFF0C\\u5FC3\\u91CC\\u7830\\u7830\\u67D4\\u8F6F\\u7684\\u611F\\u89C9\\uFF0C\\u5174\\u594B\\u53C8\\u6FC0\\u52A8\\u7684\\u60C5\\u7EEA\\uFF0C\\u60F3\\u4E0D\\u8D77\\u6765\\u53BB\\u62CD\\u7167\\uFF0C\\u53EA\\u60F3\\u76EF\\u7740\\u5979\\u7684\\u6837\\u5B50\\u523B\\u5728\\u8111\\u6D77\\u91CC\\u3002\\u5979\\u6F02\\u4EAE\\u597D\\u770B\\u7684\\u65F6\\u5019\\u5F88\\u591A\\uFF0C\\u6BCF\\u6B21\\u6211\\u90FD\\u80FD\\u627E\\u5230\\u8BCD\\u5F62\\u5BB9\\uFF0C\\u4F46\\u662F\\u6B64\\u65F6\\u6B64\\u523B\\u5FC3\\u91CC\\u90A3\\u4E48\\u591A\\u60C5\\u7EEA\\uFF0C\\u5374\\u6CA1\\u529E\\u6CD5\\u8868\\u8FBE\\u51FA\\u6765\\uFF0C\\u53EA\\u662F\\u7275\\u8D77\\u4E86\\u5979\\u7684\\u624B\\uFF0C\\u7EA2\\u4E86\\u773C\\u7736\\u3002\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u6700\\u7EC8\\u6548\\u679C\\u53EF\\u4EE5\\u5230\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/marry\"\n  }, \"\\u9884\\u89C8\\u9875\\u9762\")), mdx(\"h2\", null, \"\\u3007\\u3001\\u76EE\\u7684\"), mdx(\"p\", null, \"\\u521A\\u6536\\u5230\\u7ED3\\u5A5A\\u7167\\u7684\\u65F6\\u5019\\u5C31\\u611F\\u89C9\\u592A\\u6F02\\u4EAE\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u7231\\u4EBA\\u7A7F\\u4E0A\\u5A5A\\u7EB1\\u975E\\u5E38\\u597D\\u770B\\u7684\\u6837\\u5B50\\uFF0C\\u7B2C\\u4E00\\u65F6\\u95F4\\u5206\\u4EAB\\u7ED9\\u5BB6\\u4EBA\\uFF0C\\u4F46\\u662F\\u9AD8\\u6E05\\u56FE\\u51E0\\u5341\\u5146\\uFF0C\\u5FAE\\u4FE1\\u4E00\\u4E2A\\u4E2A\\u53D1\\u771F\\u7684\\u592A\\u5357\\u4E86\\uFF0C\\u653E\\u5230\\u7F51\\u76D8\\u4EC0\\u4E48\\u7684\\u5F88\\u4E0D\\u653E\\u5FC3\\uFF0C\\u5A5A\\u793C\\u7EAA\\u4E4B\\u7C7B\\u7684\\u6CA1\\u6709\\u76F8\\u518C\\u529F\\u80FD\\uFF0C\\u4E8E\\u662F\\u60F3\\u505A\\u4E00\\u4E2A\\u5728\\u7EBF\\u76F8\\u518C\\uFF0C\\u5305\\u62EC\\u7535\\u5B50\\u8BF7\\u67EC\\u3001\\u52A0\\u4E0A\\u795D\\u798F\\u5899\\u611F\\u89C9\\u4F1A\\u5F88\\u4E0D\\u9519\\uFF0C\\u8001\\u672C\\u884C\\u80FD\\u7528\\u4E0A\\u4E86\\u3002\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(Device, {\n    mdxType: \"Device\"\n  }, mdx(\"video\", {\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/marry.mp4\",\n    type: \"video/mp4\"\n  }))))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u7535\\u5B50\\u8BF7\\u67EC\\u8BF4\\u767D\\u4E86\\u5C31\\u662F\\u5E7B\\u706F\\u7247\\u561B\\uFF0C\\u4E5F\\u5C31\\u662F\\u9875\\u9762\\u5207\\u6362\\u52A0\\u4E0A\\u5143\\u7D20\\u52A8\\u753B\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u4E0A\\uFF0C\\u76D1\\u542C\\u6ED1\\u52A8\\u7684\\u4E8B\\u4EF6\\uFF0C\\u6839\\u636E\\u6ED1\\u52A8\\u8DDD\\u79BB\\u6765\\u5904\\u7406\\u7FFB\\u9875\\u7684\\u4E8B\\u60C5\\uFF0C\\u6211\\u8FD9\\u8FB9\\u56FE\\u5FEB\\u627E\\u4E86\\u4E00\\u4E2A\\u7FFB\\u9875\\u7684\\u5E93\\uFF0C\\u76F4\\u7528\\u4E86\\u8FDB\\u6765\\u3002\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/lipten/slidePage\",\n    name: \"slidePage\",\n    desc: \"\\u7B80\\u5355\\u3001\\u8DE8\\u5E73\\u53F0\\u3001\\u65E0\\u4F9D\\u8D56\\u7684\\u5168\\u5C4F\\u6EDA\\u52A8H5\\u63D2\\u4EF6\\uFF0C\\u53EF\\u5B9E\\u73B0\\u5185\\u5BB9\\u8D85\\u51FA\\u5C4F\\u5E55\\u6EDA\\u52A8\\u3001\\u52A8\\u6001\\u66F4\\u65B0\\u7B49\\u7279\\u8272\\u529F\\u80FD\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u53EF\\u60DC\\u4E0D\\u662F TypeScript \\u7684\\uFF0C\\u4E0D\\u8FC7\\u591F\\u7528\\u4E86\\uFF0C\\u800C\\u4E14 2.4k after gzipped\\u3002\"), mdx(\"p\", null, \"\\u518D\\u5F15\\u5165 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\"\n  }, \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\")), mdx(\"p\", null, \"\\u76F8\\u5F53\\u4E8E\\u5185\\u7F6E\\u4E03\\u5341\\u591A\\u79CD\\u52A8\\u753B\\u6548\\u679C\\u5B9E\\u73B0\\u5143\\u7D20\\u8FDB\\u5165\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(Device, {\n    mdxType: \"Device\"\n  }, mdx(\"video\", {\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/marry-slider.mp4\",\n    type: \"video/mp4\"\n  }))))), mdx(\"p\", null, \"\\u6700\\u540E\\u7B80\\u5355\\u5C01\\u88C5\\u4E00\\u4E2A AniBlock: \\u7B80\\u5355\\u7528\\u53C2\\u6570\\u63A7\\u5236\\u4E00\\u5F20\\u56FE\\u7247\\u7684\\u8FDB\\u573A\\uFF0C\\u7136\\u540E\\u5C31\\u80FD\\u62FC\\u51FA\\u6765\\u5168\\u90E8\\u7684\\u52A8\\u753B\\u6548\\u679C\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"<AniBlock\\n  effect=\\\"rotateInDownRight\\\"\\n  width={66.5}\\n  height={56}\\n  left={14.5}\\n  top={208.5}\\n  delay={800}\\n>\\n  <img src=\\\"images/flower-1.png\\\" />\\n</AniBlock>\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u7684\\u52A8\\u753B\\u8BBE\\u7F6E\\u53EF\\u4EE5\\u5C06\\u4F4D\\u7F6E\\u3001\\u65F6\\u95F4\\u3001\\u5EF6\\u8FDF\\u4F5C\\u4E3A\\u53EF\\u89C6\\u5316\\u7684\\u4E00\\u4E2A\\u53D8\\u91CF\\uFF0C\\u7136\\u540E\\u505A\\u4E00\\u4E2A\\u53EF\\u89C6\\u5316\\u7684\\u52A8\\u753B\\u7F16\\u8F91\\u5668\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u5F53\\u7136\\u5E7B\\u706F\\u7247\\u90E8\\u5206\\u4E5F\\u53EF\\u4EE5\\u81EA\\u5DF1\\u5B9E\\u73B0\\uFF0C\\u6ED1\\u52A8\\u7684\\u8FC7\\u7A0B\\u4E2D\\u7528 touchstart\\u3001touchmove\\u3001touchend\\u3001transitionend \\u4E8B\\u4EF6\\u6765\\u63A7\\u5236\\u4F4D\\u7F6E\\u548C\\u52A8\\u753B\\uFF0Ctransform translate3d \\u6837\\u5F0F\\u5C5E\\u6027\\u6765\\u63A7\\u5236\\u79FB\\u52A8\\u5B9E\\u73B0\\u5E7B\\u706F\\u7247\\u7684\\u90E8\\u5206\\u3002\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u505A\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\uFF0C\\u4E5F\\u662F\\u6700\\u7B80\\u5355\\u7684\\uFF0C\\u9700\\u6C42\\u5C31\\u662F\\u628A\\u4E00\\u4E24\\u767E\\u5F20\\u9AD8\\u6E05\\u7167\\u7247\\u653E\\u5230\\u7F51\\u9875\\u4E2D\\uFF0C\\u70B9\\u51FB\\u53EF\\u4EE5\\u67E5\\u770B\\u9AD8\\u6E05\\u56FE\\uFF0C\\u53EF\\u4EE5\\u653E\\u5927\\u62D6\\u52A8\\u67E5\\u770B\\u3002\"), mdx(\"h3\", null, \"2.1 \\u9884\\u89C8 + \\u9AD8\\u6E05\\u56FE\\u7247\\u5904\\u7406\\u548C\\u538B\\u7F29\"), mdx(\"p\", null, \"\\u539F\\u56FE\\u51E0\\u5341\\u5146\\u7684\\u5927\\u5C0F\\u5728\\u7F51\\u4E0A\\u4F20\\u8F93\\u4E0D\\u592A\\u73B0\\u5B9E\\uFF0C\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u5DF2\\u7ECF\\u8DB3\\u591F\\u6E05\\u6670\\u4E86\\uFF0C\\u6240\\u4EE5\\u672C\\u5730\\u538B\\u7F29\\u4E86 60% \\u624D\\u4E0A\\u4F20\\u5230\\u817E\\u8BAF\\u4E91\\u5B58\\u50A8 COS \\u4E0A\\u7684\\uFF0C\\u5E73\\u5747\\u5927\\u5C0F 1-5 \\u5146\\u4E5F\\u591F\\u4E00\\u822C\\u4EBA\\u7684\\u52A0\\u8F7D\\u7B49\\u5F85\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u9884\\u89C8\\u56FE\\u538B\\u7F29\\u8D28\\u91CF\\uFF0C\\u5982\\u679C\\u9884\\u89C8\\u56FE\\u4E5F\\u76F4\\u63A5\\u653E\\u539F\\u56FE\\u7684\\u8BDD\\uFF0C\\u5373\\u4F7F\\u52A0\\u4E0A\\u61D2\\u52A0\\u8F7D\\uFF0C\\u4E00\\u4E0B\\u5341\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u4E5F\\u4E0D\\u73B0\\u5B9E\\uFF0C\\u6240\\u4EE5\\u9884\\u89C8\\u56FE\\u9700\\u8981\\u5355\\u72EC\\u5904\\u7406\\uFF0C\\u597D\\u5728 COS \\u7684\\u8D44\\u6E90\\u652F\\u6301\\u514D\\u8D39\\u5904\\u7406\\uFF0C\\u53EF\\u4EE5\\u6309\\u7167\\u8D28\\u91CF\\u548C\\u5927\\u5C0F\\u6765\\u8F93\\u51FA\\u56FE\\u7247\\uFF0C\\u80FD\\u8FBE\\u5230 1M \\u4EE5\\u5185\\uFF0C\\u751A\\u81F3 100-200KB \\u7684\\u56FE\\u7247\\uFF0C\\u52A0\\u4E0A CDN \\u7F13\\u5B58\\uFF0C\\u901F\\u5EA6\\u4E5F\\u5B8C\\u5168\\u80FD\\u591F\\u63A5\\u53D7\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"781px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"102.7027027027027%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsSAAALEgHS3X78AAACuUlEQVQ4y62USU9UQRDH3xczkUjUE1GiiSjbEC8uBxcC+gn8MAZFjQmCnLgKjKMDmURImIV58/Z9nyn7X8x7PLY50ckv1Wt1VXVVS57nUbVapVqtRo1Gg/r9PqENBoMLlOevalKWZWRZFtm2TUEQjNxcVnqlwjAMqV6v08HBwYXDObC6bPmoJkVRRLIsU6/XYzRNo25XZqlpuphTeN51XVaWZf3igsuQkiQhx7EpDH26jiYpikbfvm/Qz80t2q3uUfX3PoP+jmB3yM7uaLZ36rS3/4+k2p8GTc8vUeXpe5qaeUszlSWaW3jHEsxWlml2YZkeTr2iew9e0P2HLy9lYvI5vV78QNKv7b90c3yGbt2Zp/G7FQZ9HMYFj6bfsJyYfEZjt+d47Tw4c2PsCT2eXRQuqzp9+bpJq4KVz+sFn1bBRon1M+vn935cWaO1H1t45ZCOj9ukqr3reRTf96nZbHKqWJZdpEWapoLsnCyTlTgZo0ikRAzaHZk8PyI/iBnNsChKstHEpzIWMoxTRur3B2IyoUxIECcp6YbJWLbD0jCtYi7Htl2eh9R1UxgUUCq8k5D9KD98ElmWcjWoqkqqorDU0BegWlDrqCy4iL0nMiMUR16aUl6r2XAC/W63Kx7qmKUiFHc6HWq12qwUn8ioz4MVIo5JkvJNCK5pmlzLkLAOErVsDMdYww+l6zqvAUOEARYXLoMgCFmxLWKHTbphiI0GK8JhfBYYo48L4jjmMOBsJPr8OeQKfRFUpBCshDJFUVmBOowhFMF9We6xxDi3znEc1oEHZoVn8k0E2RTu5C7rw4OO47ISKIeFAG6X/8d+HkOYHQjrYCESG5sPDw+peXRUWKjrGrXbbe63Wi3+kDHG4+HCmF0enL5ygRgjNRAjRxBFJ3FyRVq5rsdrnuezxTAA7toChAyZ8h86zwDOhEa1yQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"COS 图片处理\",\n    \"title\": \"COS 图片处理\",\n    \"src\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n    \"srcSet\": [\"/static/667781477a440f03e61263c6bef6b902/2c191/cos-image-compress.png 259w\", \"/static/667781477a440f03e61263c6bef6b902/86b01/cos-image-compress.png 518w\", \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png 781w\"],\n    \"sizes\": \"(max-width: 781px) 100vw, 781px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"COS \\u56FE\\u7247\\u5904\\u7406\"), \"\\n  \")), mdx(\"h3\", null, \"2.2 \\u56FE\\u7247\\u5217\\u8868\\u7684 Gallery\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u80FD\\u591F\\u5B9E\\u73B0\\u7011\\u5E03\\u6D41\\u7684\\u5E03\\u5C40\\u5F62\\u5F0F\\uFF1A\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/neptunian/react-photo-gallery\",\n    name: \"react-photo-gallery\",\n    desc: \"React Photo Gallery\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"451px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"110.8108108108108%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAWABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIDAQQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/2gAMAwEAAhADEAAAAdXMom0pqVBF0Aj/AP/EABwQAAICAgMAAAAAAAAAAAAAAAABAgMRExIhQf/aAAgBAQABBQKBtczZIhhFWEcSrEn6qev/xAAWEQEBAQAAAAAAAAAAAAAAAAAAERD/2gAIAQMBAT8BTK//xAAWEQADAAAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8BcP/EAB4QAAIBAwUAAAAAAAAAAAAAAAABIQIRMRAiMoGh/9oACAEBAAY/AoSLNnJkWXZNXhkxotx//8QAHRAAAgICAwEAAAAAAAAAAAAAAREAITFBUWFxgf/aAAgBAQABPyFgwRVqHOSwFONHs0pumhHNQ+oQZW0cUGJpeTCk1qn/2gAMAwEAAgADAAAAEJz4Q//EABgRAAMBAQAAAAAAAAAAAAAAAAABESFR/9oACAEDAQE/EHCuj2FH/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIWH/2gAIAQIBAT8QVLwWWEn/xAAdEAEAAwEBAAMBAAAAAAAAAAABABEhMUFRYYHB/9oACAEBAAE/EHSAjR+95KXLroaDTh8Q8fbDEBOXOt/x5C8EMa11zZ1wKeVKJy8HrGwrlmhcT13pE/s//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"竖向相册\",\n    \"title\": \"竖向相册\",\n    \"src\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n    \"srcSet\": [\"/static/95a02834beebecae8a4aad26eaa2fcb0/fca29/gallery.jpg 259w\", \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg 451w\"],\n    \"sizes\": \"(max-width: 451px) 100vw, 451px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7AD6\\u5411\\u76F8\\u518C\"), \"\\n  \")), mdx(\"p\", null, \"\\u518D\\u6839\\u636E\\u6EDA\\u52A8\\u6761\\u4F4D\\u7F6E\\uFF0C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u61D2\\u52A0\\u8F7D\\u7684\\u903B\\u8F91\\u5373\\u53EF\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"useEffect(() => {\\n  const handleScroll = (e: MouseEvent) => {\\n    let scrollY = wrapBoxEl.current.scrollTop\\n    if (\\n      wrapBoxEl.current.offsetHeight + scrollY >=\\n      wrapBoxEl.current.scrollHeight - 50\\n    ) {\\n      loadMorePhotos()\\n    }\\n  }\\n\\n  wrapBoxEl.current.addEventListener(\\\"scroll\\\", handleScroll)\\n  return () => wrapBoxEl.current.removeEventListener(\\\"scroll\\\", handleScroll)\\n})\\n\")), mdx(\"h3\", null, \"2.3 \\u70B9\\u51FB\\u653E\\u5927\\u7684 LightBox\"), mdx(\"p\", null, \"gallery \\u81EA\\u5E26\\u4E00\\u4E2A LightBox \\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E0D\\u80FD\\u653E\\u5927\\u62D6\\u52A8\\uFF0C\\u800C\\u4E14\\u56FE\\u7247\\u6570\\u91CF\\u591A\\u4E86\\u4F1A\\u51FA\\u73B0\\u5361\\u987F\\u6027\\u80FD\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u81EA\\u5DF1\\u5355\\u72EC\\u53C8\\u627E\\u5230\\u4E86\\u4E00\\u4E2A\\u70B9\\u51FB\\u653E\\u5927\\u7684\\u7EC4\\u4EF6\\uFF0C\\u63A5\\u5230\\u4E86\\u70B9\\u51FB\\u4E8B\\u4EF6\\u4E0A\\uFF0C\\u53EF\\u4EE5\\u505A\\u5230\\u5355\\u673A\\u653E\\u5927\\u548C\\u62D6\\u52A8\\u67E5\\u770B\\u7684\\u529F\\u80FD\\u3002\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/tim-soft/react-spring-lightbox\",\n    name: \"react-spring-lightbox\",\n    desc: \"\\uD83D\\uDCF7  A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u4F46\\u662F\\u52A0\\u4E0A\\u591A\\u5F20\\u56FE\\u7247\\u4E4B\\u540E\\uFF0C\\u4E00\\u65B9\\u9762\\u662F\\u61D2\\u52A0\\u8F7D\\u95EE\\u9898\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E00\\u767E\\u591A\\u5F20\\u56FE\\u7247\\u7684\\u52A8\\u753B\\u7740\\u5B9E\\u5361\\u987F\\uFF0C\\u6240\\u4EE5\\u6700\\u540E\\u53BB\\u9664\\u4E86\\u591A\\u56FE\\u7247\\u6ED1\\u52A8\\u5207\\u6362\\u7684\\u529F\\u80FD\\uFF0C\\u4EC5\\u80FD\\u67E5\\u770B\\u70B9\\u51FB\\u56FE\\u7247\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u795D\\u798F\\u5899\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u529F\\u80FD\\u539F\\u672C\\u662F\\u6253\\u7B97\\u4F7F\\u7528\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u6216\\u8005\\u5F00\\u653E\\u5E73\\u53F0\\uFF0C\\u83B7\\u53D6\\u7528\\u6237\\u7684\\u5934\\u50CF\\u548C\\u6635\\u79F0\\uFF0C\\u53D1\\u8868\\u8BC4\\u8BBA\\uFF0C\\u6700\\u597D\\u518D\\u52A0\\u4E0A\\u6253\\u8D4F\\u7684\\u529F\\u80FD\\u3002\\u60F3\\u8C61\\u5F88\\u7F8E\\u597D\\uFF0C\\u663E\\u793A\\u5F88\\u6253\\u8138\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5B9E\\u73B0\\u7684\\u6548\\u679C\\u5C31\\u53EA\\u6709\\u4E00\\u4E2A\\u5F39\\u5E55\\u5899\\uFF0C\\u53EF\\u4EE5\\u8BC4\\u8BBA\\uFF0C\\u6253\\u8D4F\\u529F\\u80FD\\u53D8\\u6210\\u4E86\\u6253\\u8D4F\\u4E8C\\u7EF4\\u7801\\u3002\"), mdx(\"p\", null, \"\\u5F39\\u5E55\\u529F\\u80FD\\u4F7F\\u7528\\u7684\\u662F\\uFF1A\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/zerosoul/rc-bullets\",\n    name: \"rc-bullets\",\n    desc: \"\\uD83C\\uDF08 \\u57FA\\u4E8ECSS3 Animation\\uFF0C\\u4F7F\\u7528React\\u6784\\u5EFA\\u7684\\u5F39\\u5E55\\u7EC4\\u4EF6\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u7A0D\\u5FAE\\u4FEE\\u6539\\u4E86\\u4E00\\u4E9B\\uFF0C\\u66F4\\u7B26\\u5408\\u6574\\u4E2A\\u76F8\\u518C\\u7684\\u98CE\\u683C\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"441px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"201.15830115830119%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAACXBIWXMAAAsSAAALEgHS3X78AAAJP0lEQVRIx42XCVBV1xnHLzuPTRGEhwjygPd4Dx677Ot7vPdkExCjiEbRKIkrm4C4oRiXWhdiXBKNZlFxiVtcatKpWdrORGNSTNUxmqTtdFI7bSfONJMmrYn21+9eYsckdqZ35j/nnO+c+z//c853z/ddJSEhgZKSEiorK6moqKC8vByXy4XT6cThcHyHMsrKyh5qD0G1PbAXFBRgNBpRiouLNUNKSgpWqxWLxYLJZCIuLo5YQyyxsbFaXWtL3WAwPBIqYW5uLoqqKCMzk8ysLNIyMkhJTSVJiM1mCwkms0yQqNlSUlK1yYwymcmU8D2oylQRdrt9iDDZbMZqMmIWBcYx0cRGRmKMNQipCXOC2BPiv4PxofIhyDijMX6IsFL2zTnjCeoW91C9qIPq1k6qFrWTlFVCuN7EqKgkIqKs6KOSCR8t9dFWQRL6URaBWZBA+CgT0WOMsp9CWDt+PNXP7WXGex8y7Z13efL3f6PjLtif3oeiJKEMK0EJLMRtWBHuw4rxCMzF3T8LN106bj5W3HwTUTxjCQkzykGWoagnO2luJ/PX7qS5t5/mVf3M3/AclRVzSIt1MdZax/DICjxGlOETYsNzeD7eQTl4+afj4ZuMl18KireFkeEJOB2iUHWRVfYqBiY0sdsxgf2PNfFK/XQOTJ7FtpJadmSV4UypRQmQwUHFUuah6LLxCsjG3S8Nz8A03H3ShNAypLCmtpZxaU4a8xqYmDWRhoIpTM4X5E5miauBvoqpVOdNIdVaT0bieDKtVVgSKvAeUYyPqPUKyhTysYQKYV3teJS62jp8I2wo+hqUUbV4RjWgjJyEo+BxPp0wg8HHp3C9bQ6/W9nBLSk/rHfwmwkOcpInilqH7G0him8Ow0It1NfXoVRVVRIQPQ6fMVPxGzMNP0MTHrHNWAqWsLa+k/UNnaybvpR1M5fTN6WLrZPn8eK8xRRWdGPIa8GcOwdjVhPxicVUlDtRqquq8IudgE9SC77mp/BJ68KrbKds7iHZj5Mo408LzojDnpDPah+LXr7Jurf+wctnL/D8q6fZe+Icb3xwg7Zlq8nOGituU1ODLrYeXX4f/qXr8a15iVHTDqN/4jT6WefQN54k7LHjhFUNEGLfw5y151l7cJAVu86zfMcZlmw5woa9rzO5aQEF+fLpVVZWoIsZjy67F6XhVao7BtjWvod3FrRwrXcpVzes48rypVzbuJErfWu4NG0Kp6Y9QXDxVtwzNsrKVuAW10JITDHOMvFZ9SYJMNTgY+1BmXgc56Yz7Oj8CQPzOjjRvZITS9dwvGMpJ5eu5tiiJZxqaqa/qQdf5z7c87bjm/40HuYeRsY5hbB4iDAooRElv5+qmo0cbVzF9rk9bFvYy+7WPo629zIgONSzlgOdT7O3qZXnZneT3nQYZWw/3hkb8LCuJdRUidNepBLaGWZ5HM+6I1TM3M3z41vkVJexcX4f2+b0cKC5hT3Tn+Jg12qOdizj4OwWDrb2UtRyDt/yAYJLtqOkbiTEXCeE4kJldhsBKTPxn32OgK7L6HreJ7DnMiM2fUzIkrPyPcdQWzeb1/YeYv3mbWzac5AtJ9+lVw5iydaDPHP4Lda8Mkh4Yi0Om0poK8U/uQm/BT/Hf9UgutUfoVt1naCtnzHssU1CGM2Mpc/w68Eb7D58nBfETV6+MMj2U2+x+fDrDLz5Pjt+9gnh4uhDhKLQz9yI/9yzjNh2g/AXbhKw7Q/4d74pH346XsoYQhbuQn/sT4SmTCJ4RDLBTcdIXXyJvtYTrG4/z8r2X1HlXEBRkbiNeinqYmpwazyEz5YbBL5wC999f8WrRRzaL1muJgPuceX4NMt1FmhF8YlDmXkAy5rrrH9ygPVtb7Jnw6dMre0mvzB7SKFvdDX1jsWsmt5L14wtdE3vp6tqGYtN4+i0lEvpYHFMKR2xNoGdnvoVLJm2mdWulawtWsxPc9upt7ootMkpl4rC4JhxHLI6OZ9q51TBXN6o6+SsfR6nMiYLJvFaZgPHE2t4VVzjmHkCpwue4nR+My8Fu9jjV8KARyEzQ5LJd8olYxPCoCgbu9Jn8EbxXC40ruRCw3JeL2/hFa809nsP4YBPOgPeqRwJc3E0so4jI8s5HlHJ6UgnF8KdzIvKILesVPxQCL0j7ViSp1OdOYsq1wrq5r5ITUUnruB0XOHZuMIysYemkRucQmFoNjZ7Nzk1m2md0stvu5ZzqW0ZC53l5BYXqXtox08UKrFTUOLkLkxpRpl1VJy1SVwmDMVrjJR6/IKMVJlzcCTk4ShswD6hm8zyhWSPm0lBaYOE2hxs4oIaodtoqYQ78AnOxFdfjF/KVHzDsvHwiMLb1yCEETiNOVwqsXF6ejNn5rezv6CMFbku8QQzinscw0IMuNQQYJdUojhyLCWREnwCEyWiJcr1no1n2FjcvKJw84gUlQb8A+JJjkwlIyqTjOixZBnyiEmw4RVilfcshEko1YKUeij9o3I4Y3ARFZGlzeglA7xHpuKpM+DhHomnv6jwlqW7jxbECKTuFo3in4bXCAmnMm6kPk4INYV2CsKSyA/PkCgmy/OVwT7RWt3NS15SRkk7XlRG4+YZhbuU7qLc3VPaXvES9TKEPIoRodES9Ryyh7Jk90BZVoCBwNBEQRJ+wSb8hsfLQZjw8Y9DN9yKLigBnSxbF2gSGKXfLHYTAaEZ6PTZhEfEaVmaYrPZOLB/gI9ufMx7lwf5YPAq167fFHw0VF67ydXrt7Tyv7hxi6sXr3D10odcuXKNP/7il6xYtpzs7OwhwosXL6I+9+59y//9fP3Nd5V/w59vs/PZZ7UsTiN8++23ta7PP78j+FyI73P37l0N9+/f5/bt29y5c0fs98T2Dd+ouH+Pf976jK///qX2bn9/P5kPCC9fvqwZv/rqK7744osfiVHJvv32Eeo/+Qt8+S+tumvnTjIkv9Sur8bGRjo7O2ltbaWtre17UG3t7e0aftjX1i79LS10d3drKXVRUdHQKYeHh6PX638E1R4REUGkJKAP2v9rXFRUlJZvawrj4+NJTEzUUt4fIikpSSvV/uTk5EeOUaEm/+r2aXuYnp6uJd4PkvMfQp1QJTZL6vxwEv+gLyYmhizJ0bUlq+yqVPVvIC8vj/z8/O9BtRUWFmqD1fqjoP6WlJaWair/A/iLLXs1YiRFAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"弹幕墙\",\n    \"title\": \"弹幕墙\",\n    \"src\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n    \"srcSet\": [\"/static/458b449e3e1c28c1ee09e955e46aeabe/2c191/bullets.png 259w\", \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png 441w\"],\n    \"sizes\": \"(max-width: 441px) 100vw, 441px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5F39\\u5E55\\u5899\"), \"\\n  \")), mdx(\"h3\", null, \"\\u8BC4\\u8BBA\\u8FC7\\u6EE4\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u795D\\u798F\\u5899\\uFF0C\\u6D89\\u53CA\\u5230\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u6CE8\\u518C\\u767B\\u5F55\\u5C31\\u592A\\u9EBB\\u70E6\\u4E86\\uFF0C\\u4E0D\\u9700\\u8981\\u767B\\u5F55\\u6CE8\\u518C\\u7684\\u8BDD\\uFF0C\\u4E07\\u4E00\\u6709\\u4EBA\\u60F3\\u8981\\u6076\\u5FC3\\u6216\\u8005\\u4F7F\\u574F\\uFF0C\\u53D1\\u5E03\\u70B9\\u810F\\u8BDD\\u4EC0\\u4E48\\u7684\\uFF0C\\u6CA1\\u6CD5\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u7684\\u624B\\u6BB5\\u662F \\u3010\\u533F\\u540D\\u767B\\u5F55\\u3011 + \\u3010\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\u8FC7\\u6EE4\\u3011\\uFF1A\"), mdx(\"p\", null, \"\\u533F\\u540D\\u767B\\u5F55\\uFF1A\\u4F7F\\u7528\\u7684 BaaS LeanCloud \\u7684\\u6570\\u636E\\u5B58\\u50A8\\u7CFB\\u7EDF\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u533F\\u540D\\u767B\\u5F55\\u7684\\u903B\\u8F91\\uFF0C\\u533F\\u540D\\u767B\\u5F55\\u540E\\u57FA\\u672C\\u4E0A\\u80FD\\u62FF\\u5230\\u4E00\\u4E9B\\u5F88\\u57FA\\u672C\\u7684\\u4FE1\\u606F\\uFF0C\\u9650\\u5236\\u5355\\u7528\\u6237\\u53D1\\u5E03\\u9891\\u7387\\uFF0C\\u914D\\u5408 UA\\u3001IP \\u6536\\u96C6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5C06\\u591A\\u6B21\\u53D1\\u5E03\\u7684\\u795D\\u798F\\u8054\\u7CFB\\u8D77\\u6765\\uFF0C\\u81F3\\u5C11\\u77E5\\u9053\\u7279\\u5B9A\\u7684\\u67D0\\u4E2A\\u4EBA\\u53D1\\u4E86\\u54EA\\u4E9B\\uFF0C\\u4E00\\u4E2A\\u5355\\u9875\\u8FD9\\u6837\\u7684\\u624B\\u6BB5\\u4E5F\\u8DB3\\u591F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\uFF1A\\u5728\\u7F51\\u4E0A\\u627E\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u654F\\u611F\\u8BCD\\u5E93\\uFF0C\\u4E00\\u5343\\u591A\\u4E2A\\u810F\\u8BDD\\u3001\\u8272\\u60C5\\u3001\\u653F\\u6CBB\\u7B49\\u654F\\u611F\\u8BCD\\uFF0C\\u7136\\u540E\\u7528\\u5FEB\\u626B\\u7684\\u5F62\\u5F0F\\u5224\\u65AD\\u7528\\u6237\\u8F93\\u5165\\u662F\\u5426\\u6709\\u7981\\u7528\\u8BCD\\uFF0C\\u5982\\u679C\\u6709\\u7684\\u8BDD\\u4FDD\\u5B58\\u7684\\u65F6\\u5019\\u8BBE\\u4E3A\\u4E0D\\u53EF\\u7528\\uFF0C\\u8FD9\\u6837\\u5C31\\u4E0D\\u4F1A\\u663E\\u793A\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4E86\\uFF0C\\u540E\\u7EED\\u5982\\u679C\\u5B58\\u5728\\u8FD9\\u4E9B\\u6570\\u636E\\u8FD8\\u80FD\\u770B\\u5230\\u548C\\u54EA\\u4E2A\\u533F\\u540D\\u8D26\\u53F7\\u76F8\\u5173\\u8054\\uFF0C\\u7B80\\u5355\\u5224\\u65AD\\u662F\\u8C01\\u4E0D\\u5B89\\u597D\\u5FC3\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6700\\u540E\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u672C\\u8EAB\\u7528\\u4E86\\u51E0\\u5929\\u65F6\\u95F4\\uFF0C\\u7528\\u4E86\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u7684\\u5E93\\uFF0C\\u52A0\\u4E0A COS \\u548C LeanCloud \\u540E\\u7AEF\\u670D\\u52A1\\u7684\\u914D\\u5408\\uFF0C\\u6574\\u4E2A\\u5F00\\u53D1\\u6D41\\u7A0B\\u6CA1\\u90A3\\u4E48\\u590D\\u6742\\u3002\"), mdx(\"p\", null, \"\\u6700\\u6709\\u611F\\u89C9\\u7684\\u662F\\u6BCF\\u6B21\\u8C03\\u8BD5\\u7684\\u753B\\u9762\\u90FD\\u662F\\u81EA\\u5DF1\\u548C\\u7231\\u4EBA\\u7684\\u7F8E\\u7167\\uFF0C\\u611F\\u89C9\\u8FD8\\u662F\\u5F88\\u4E0D\\u4E00\\u6837\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5FAE\\u4FE1\\u5F00\\u653E\\u5E73\\u53F0\\u4E0D\\u5410\\u4E0D\\u5FEB\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684\\u4F20\\u64AD\\u90FD\\u5728\\u5FAE\\u4FE1\\u4E0A\\uFF0C\\u6240\\u4EE5\\u539F\\u672C\\u60F3\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4F7F\\u7528\\u5FAE\\u4FE1\\u7684\\u6570\\u636E\\uFF0C\\u81F3\\u5C11\\u62FF\\u5230\\u6635\\u79F0\\u548C\\u5934\\u50CF\\uFF0C\\u8BA9\\u4EB2\\u4EBA\\u90FD\\u6709\\u70B9\\u53C2\\u4E0E\\u611F\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u5F88\\u8BA9\\u6211\\u611F\\u89C9\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u7684\\u65E0\\u529B\\u3002\"), mdx(\"p\", null, \"\\u66FE\\u7ECF\\u7528\\u8FC7\\u5FAE\\u4FE1\\u516C\\u4F17\\u53F7\\u548C\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u53EF\\u80FD\\u662F\\u5FD8\\u4E86\\u600E\\u4E48\\u88AB\\u652F\\u914D\\u7684\\u4E86\\u3002\\u521A\\u5F00\\u59CB\\u7684\\u7B80\\u5355\\u641C\\u7D22\\u6280\\u672F\\u6587\\u6863\\u9636\\u6BB5\\uFF0C\\u5404\\u4E2A\\u6587\\u6863\\u5982\\u679C\\u82B1\\u4E86\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u4F60\\u81F3\\u5C11\\u8FD8\\u80FD\\u6478\\u5230\\u95E8\\u9053\\uFF0C\\u660E\\u767D\\u3010\\u670D\\u52A1\\u53F7\\u3001\\u8BA2\\u9605\\u53F7\\u3001\\u5C0F\\u7A0B\\u5E8F\\u3001\\u4F01\\u4E1A\\u5FAE\\u4FE1\\u3011\\u548C\\u3010\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5F00\\u653E\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u7A0B\\u5E8F\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u6E38\\u620F\\u5E73\\u53F0\\u3011\\u7684\\u533A\\u522B\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u4E2A\\u4EBA\\u6CE8\\u518C\\u8D26\\u53F7\\u7684\\u65F6\\u5019\\u4E3A\\u4EC0\\u4E48\\u6BCF\\u4E2A\\u5E73\\u53F0\\u90FD\\u8981\\u5355\\u72EC\\u7528\\u6CA1\\u6709\\u5173\\u8054\\u8FC7\\u5176\\u4ED6\\u5E73\\u53F0\\u751A\\u81F3\\u4E0D\\u80FD\\u5173\\u8054\\u4E2A\\u4EBA\\u5FAE\\u4FE1\\u7684\\u8D26\\u53F7\\u6CE8\\u518C\\uFF0C\\u5C1D\\u8BD5\\u4E86\\u4E09\\u56DB\\u4E2A\\u90AE\\u7BB1\\u624D\\u6CE8\\u518C\\u6210\\u529F\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u518D\\u7FFB\\u7FFB\\u5B98\\u65B9\\u6587\\u6863\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u5927\\u6982\\u660E\\u767D\\u6211\\u9700\\u8981\\u7684\\u51E0\\u4E2A\\u63A5\\u53E3\\u5728\\u54EA\\uFF0C\\u9700\\u8981\\u540E\\u53F0\\u670D\\u52A1\\u5668\\u3001\\u5B89\\u5168\\u57DF\\u540D\\u3001\\u5B89\\u5168 IP\\u3001\\u56DE\\u8C03 URL \\u7B49\\uFF0C\\u660E\\u767D access_token\\u3001OpenID\\u3001UnionID\\u3001scope\\u3001jsapi_ticket \\u7684\\u7B7E\\u540D\\u7B97\\u6CD5\\u3002\\u6700\\u540E\\u7684\\u6700\\u540E\\uFF0C\\u5C1D\\u8BD5\\u7F16\\u7A0B\\u7684\\u65F6\\u5019\\u8FD8\\u6CE8\\u610F\\u5230\\u4F60\\u5FC5\\u987B\\u83B7\\u5F97\\u63A5\\u53E3\\u6743\\u9650\\uFF0C\\u4E0D\\u7136\\u90FD\\u6CA1\\u529E\\u6CD5\\u4FEE\\u6539\\u4E00\\u4E2A\\u5206\\u4EAB\\u94FE\\u63A5\\u3002\"), mdx(\"p\", null, \"\\u6211\\u80FD\\u591F\\u770B\\u5230\\u5B98\\u65B9\\u6709\\u591A\\u52AA\\u529B\\u8BA9\\u6574\\u4E2A\\u5F00\\u53D1\\u8005\\u7684\\u4F53\\u9A8C\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u662F\\u5E73\\u53F0\\u786E\\u5B9E\\u5F88\\u5927\\u3001\\u5F00\\u53D1\\u8005\\u592A\\u591A\\u3001\\u7BA1\\u7406\\u8D77\\u6765\\u6BD4\\u8F83\\u56F0\\u96BE\\uFF0C\\u5BFC\\u81F4\\u6574\\u4E2A\\u4F53\\u9A8C\\u4E00\\u8A00\\u96BE\\u5C3D\\u3002\\u518D\\u52A0\\u4E0A\\u5927\\u5927\\u5C0F\\u5C0F\\u7684\\u516C\\u53F8\\u6574\\u5929\\u7167\\u7740\\u8FD9\\u4E9B\\u6587\\u6863\\uFF0C\\u53D1\\u7740\\u5404\\u79CD\\u5404\\u6837\\u7684\\u56FD\\u5185\\u7279\\u8272\\u7684\\u6559\\u7A0B\\uFF0C\\u5BFC\\u81F4\\u60F3\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u975E\\u5E38\\u66F2\\u6298\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5404\\u79CD\\u65B9\\u6CD5\\uFF0C\\u90FD\\u8981\\u6C42\\u60A8\\u7684\\u8D26\\u53F7\\u5FC5\\u987B\\u8BA4\\u8BC1\\uFF0C\\u4F01\\u4E1A\\u4E3B\\u4F53\\u7684\\u8BA4\\u8BC1\\u8D39\\u7528 300 \\u5757\\uFF0C\\u4E2A\\u4EBA\\u4E3B\\u4F53\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF01\\uFF01\\uFF01\\u6211\\u8BF7\\u95EE\\u5982\\u679C\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF0C\\u6CA1\\u529E\\u6CD5\\u83B7\\u53D6\\u5230\\u90A3\\u4E9B\\u6743\\u9650\\uFF0C\\u8FD9\\u4E2A\\u5F00\\u53D1\\u8005\\u5E73\\u53F0\\u662F\\u5E72\\u561B\\u7ED9\\u4E2A\\u4EBA\\u6CE8\\u518C\\u7684\\u5462\\uFF1F\\uFF1F\\u610F\\u601D\\u5C31\\u662F\\u7528\\u7528\\u6D4B\\u8BD5\\u8D26\\u53F7\\u5457\\uFF1F\"), mdx(\"p\", null, \"\\u516C\\u4F17\\u53F7\\u5E73\\u53F0\\u7684\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u53EA\\u80FD\\u53D1\\u53D1\\u6587\\u7AE0\\u3002\\u5F00\\u653E\\u5E73\\u53F0\\u7684\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u4E00\\u70B9\\u7528\\u6CA1\\u6709\\u3002\"), mdx(\"p\", null, \"\\u6D6A\\u8D39\\u4E86\\u751F\\u547D\\u4E2D\\u7684\\u5F88\\u591A\\u4E2A\\u5C0F\\u65F6\\u624D\\u5F04\\u6E05\\u8FD9\\u4E2A\\u4E8B\\u60C5\\uFF0C\\u6700\\u540E\\u5FAE\\u4FE1 jssdk \\u4E00\\u70B9\\u4E5F\\u6CA1\\u6CD5\\u7528\\uFF0C\\u4FEE\\u6539\\u4E0B\\u5206\\u4EAB\\u51FA\\u6765\\u7684\\u94FE\\u63A5\\u7684\\u56FE\\u6807\\u90FD\\u4E0D\\u53EF\\u80FD\\uFF0C\\u4E00\\u4E2A\\u6309\\u7167\\u6807\\u51C6 web \\u89C4\\u8303\\u505A\\u7684\\u9875\\u9762\\uFF0C\\u5728\\u5FAE\\u4FE1\\u91CC\\u9762\\u50CF\\u662F\\u4E00\\u4E2A\\u4E09\\u65E0\\u7684\\u5C71\\u5BE8\\u7F51\\u7AD9\\uFF0C\\u975E\\u5E38\\u8BA9\\u4EBA\\u6C14\\u6124\\u65E0\\u8BED\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"efef442d-0f5c-556e-a942-17e00d70eb08","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/deno/deno.md","id":"8f37d124-ec81-52a3-85ef-12560d306667","parent":{"name":"deno","sourceInstanceName":"blog"},"excerpt":"〇、背景 Node.js 是一个了不起的应用，将 JavaScript 这个偏居一隅的脚本，变成了领域边界非常广阔的应用语言，就这一点来说怎么夸赞都不为过。 前些年 Node.js 在仅有的 ES 标准下发展壮大，不过近些年随着 ES 标准的演进，TypeScript 的广泛应用，Node.js 曾经引以为傲的生态，逐渐的变得拖后腿了。 与我而言影响比较大，让我不太习惯、不太喜欢的有： TypeScript 的集成不太行 Promise、await 等语法生态的缺失 CommonJS 和 ES…","fields":{"title":"🐍 新技术尝个鲜 - deno","slug":"/blog/deno-introduce","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","date":"2020-07-20","redirects":null,"datetime":"2020-07-20 20:28:12","categories":["code"],"series":null,"tags":["deno"],"status":"online"},"frontmatter":{"published":null,"tags":["deno"],"theme":null,"slug":"deno-introduce","date":"2020-07-20 20:28:12"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"deno-introduce\",\n  \"title\": \"🐍 新技术尝个鲜 - deno\",\n  \"date\": \"2020-07-20 20:28:12\",\n  \"author\": \"Ubug\",\n  \"description\": \"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"deno\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u3007\\u3001\\u80CC\\u666F\"), mdx(\"p\", null, \"Node.js \\u662F\\u4E00\\u4E2A\\u4E86\\u4E0D\\u8D77\\u7684\\u5E94\\u7528\\uFF0C\\u5C06 JavaScript \\u8FD9\\u4E2A\\u504F\\u5C45\\u4E00\\u9685\\u7684\\u811A\\u672C\\uFF0C\\u53D8\\u6210\\u4E86\\u9886\\u57DF\\u8FB9\\u754C\\u975E\\u5E38\\u5E7F\\u9614\\u7684\\u5E94\\u7528\\u8BED\\u8A00\\uFF0C\\u5C31\\u8FD9\\u4E00\\u70B9\\u6765\\u8BF4\\u600E\\u4E48\\u5938\\u8D5E\\u90FD\\u4E0D\\u4E3A\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u524D\\u4E9B\\u5E74 Node.js \\u5728\\u4EC5\\u6709\\u7684 ES \\u6807\\u51C6\\u4E0B\\u53D1\\u5C55\\u58EE\\u5927\\uFF0C\\u4E0D\\u8FC7\\u8FD1\\u4E9B\\u5E74\\u968F\\u7740 ES \\u6807\\u51C6\\u7684\\u6F14\\u8FDB\\uFF0CTypeScript \\u7684\\u5E7F\\u6CDB\\u5E94\\u7528\\uFF0CNode.js \\u66FE\\u7ECF\\u5F15\\u4EE5\\u4E3A\\u50B2\\u7684\\u751F\\u6001\\uFF0C\\u9010\\u6E10\\u7684\\u53D8\\u5F97\\u62D6\\u540E\\u817F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4E0E\\u6211\\u800C\\u8A00\\u5F71\\u54CD\\u6BD4\\u8F83\\u5927\\uFF0C\\u8BA9\\u6211\\u4E0D\\u592A\\u4E60\\u60EF\\u3001\\u4E0D\\u592A\\u559C\\u6B22\\u7684\\u6709\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"TypeScript \\u7684\\u96C6\\u6210\\u4E0D\\u592A\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise\\u3001await \\u7B49\\u8BED\\u6CD5\\u751F\\u6001\\u7684\\u7F3A\\u5931\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CommonJS \\u548C ES Module \\u7684\\u6CA1\\u6CD5\\u517C\\u5BB9\")), mdx(\"p\", null, \"\\u529F\\u80FD\\u7684\\u652F\\u6301\\u90FD\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u8003\\u8651\\u5230\\u592A\\u7075\\u6D3B\\u3001\\u5386\\u53F2\\u517C\\u5BB9\\u3001\\u7B2C\\u4E09\\u65B9\\u5E93\\u7B49\\u539F\\u56E0\\uFF0C\\u8FD8\\u662F\\u5199\\u8D77\\u6765\\u987E\\u5FCC\\u592A\\u591A\\uFF0C\\u8FD9\\u867D\\u7136\\u4E0D\\u662F Node.js \\u7684\\u9519\\uFF0C\\u4F46\\u662F\\u7528\\u8D77\\u6765\\u4E0D\\u8212\\u670D\\u8FD9\\u4E2A\\u6CA1\\u529E\\u6CD5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"node = no + de => deno = de(story) no(de)\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 deno \\u88AB\\u5F00\\u53D1\\u51FA\\u6765\\uFF0C\\u76EE\\u6807\\u5C31\\u662F\\u7528\\u6765\\u66FF\\u4EE3 node.js\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001Deno \\u5438\\u5F15\\u6211\\u7684\\u5730\\u65B9\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E TypeScript \\u5F15\\u64CE\\uFF0C\\u76F4\\u63A5\\u652F\\u6301 ts \\u8BED\\u8A00\\u7684\\u89E3\\u91CA\\u8FD0\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Rust \\u7684\\u5E94\\u7528\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u7B97\\u662F\\u975E\\u5E38\\u706B\\u70ED\\u7684\\u8BED\\u8A00\\uFF0C\\u5F88\\u611F\\u5174\\u8DA3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E25\\u683C\\u7684\\u6743\\u9650\\u7BA1\\u63A7\\uFF0C\\u5982\\u679C node.js \\u8BFB\\u53D6\\u672C\\u5730\\u6587\\u4EF6\\u4E0A\\u4F20\\u5230\\u67D0\\u4E2A\\u670D\\u52A1\\u5668\\u6211\\u662F\\u6CA1\\u529E\\u6CD5\\u4E8B\\u5148\\u63A7\\u5236\\u7684\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u66F4\\u517C\\u5BB9 Web \\u89C4\\u8303\\u7684\\u63A5\\u53E3\\u8BBE\\u8BA1\\uFF0Cwindow\\u3001fetch\\u3001addEventListener \\u7684\\u80FD\\u529B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise > callback\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"ES Module \\u6A21\\u5757\\u89C4\\u8303\\uFF0C\\u66F4\\u9762\\u5411\\u6807\\u51C6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E dev \\u5F00\\u53D1\\u547D\\u4EE4\")), mdx(\"h2\", null, \"\\u4E8C\\u3001Show me the code\"), mdx(\"p\", null, \"mac \\u4E0B\\u8FD0\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"curl -fsSL https://deno.land/x/install/install.sh | sh\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.007722007722005%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAAv0lEQVQY002O2wqDMBiDfQxRFC9EQVoPqKj1gNOpqO//PJn52WAXH6FNmsYqigLXdWGeZxzHgfM8sW3bw/urm3hd16GqKtR1LUqapkHbtijLEuxRSsHSWmMYBjGpDCilkaapBOI4Rp7nyLJM4B3f0Pd9H7Ztw3EcwXVdWAys64pxHLHvuyzimUzThGVZcd+3LGI2SRIp5idBEEjpP1YURTB9j/7h9VqegkWKiDFGFnM9c1zLwjAMZZHneVLyU/IBwvV+fVr7rUkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"安装成功\",\n    \"title\": \"安装成功\",\n    \"src\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png\",\n    \"srcSet\": [\"/static/b28490ac5b3c8125a17024dfbe2fc7b7/2c191/deno-1.png 259w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/86b01/deno-1.png 518w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png 1035w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png 1408w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5B89\\u88C5\\u6210\\u529F\"), \"\\n  \")), mdx(\"p\", null, \"\\u73B0\\u5728\\u5B89\\u88C5\\u6210\\u529F\\uFF0C\\u90A3\\u4E48\\u8BD5\\u8BD5\\u7B80\\u5355\\u8FD0\\u884C\\u4E00\\u4E2A\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u7528\\u6700\\u7ECF\\u5178\\u7684\\u8FDC\\u7AEF\\u6587\\u4EF6\\u5F62\\u5F0F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"15.83011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAmklEQVQI11VO0QrDIBDrd7RIUXF7sFWZW1c6nVSF/v8XZTuhgz2E5MjdJR3jAso6rNsG7z1CCLDWQmvd2BgD59xPT9MEzjn6vscwDH9gjKG7LBLXIrGkB1JMiDEgpYRaK0opOI4DOeem931vofM8t8cUdGqCEAKdvmk884p3eH3bRRh/byYtUiMCtaVZKYVxHFtDOpZSNj5B3gepp1vzmtAZVQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"运行成功\",\n    \"title\": \"运行成功\",\n    \"src\": \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png\",\n    \"srcSet\": [\"/static/2705379a8c65587d9d9e1613f74621f7/2c191/deno-2.png 259w\", \"/static/2705379a8c65587d9d9e1613f74621f7/86b01/deno-2.png 518w\", \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png 1035w\", \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png 1448w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u8FD0\\u884C\\u6210\\u529F\"), \"\\n  \")), mdx(\"h3\", null, \"\\u5199\\u4E00\\u4E2A\\u672C\\u5730\\u7684\\u7A0B\\u5E8F\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { serve } from \\\"https://deno.land/std@0.62.0/http/server.ts\\\";\\nconst s = serve({ port: 8000 });\\nconsole.log(\\\"http://localhost:8000/\\\");\\nfor await (const req of s) {\\n  req.respond({ body: \\\"Hello World\\\\n\\\" });\\n}\\n\\n\")), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u4ECE Node.js \\u5207\\u6362\\u5230 Deno \\u8FD8\\u592A\\u65E9\\uFF0C\\u751F\\u6001\\u3001\\u7A33\\u5B9A\\u6027\\u3001\\u5468\\u8FB9\\u652F\\u6301\\u7B49\\u8FD8\\u4E0D\\u5B8C\\u5584\\uFF0C\\u516C\\u53F8\\u7684\\u4E1A\\u52A1\\u7528 Node.js \\u662F\\u66F4\\u5408\\u9002\\u7684\\u9009\\u62E9\\uFF0C\\u4E91\\u670D\\u52A1\\u5546\\u7684 Serverless \\u4E4B\\u7C7B\\u7684\\u670D\\u52A1\\u76EE\\u524D\\u4E5F\\u53EA\\u63D0\\u4F9B Node.js \\u7684\\u73AF\\u5883\\uFF0C\\u5176\\u4E2D\\u7684\\u5F88\\u591A\\u7279\\u6027\\uFF0C\\u6BD4\\u5982 URL \\u7684\\u6A21\\u5757\\u52A0\\u8F7D\\u5F62\\u5F0F\\u7B49\\uFF0C\\u5728\\u5206\\u53D1\\u3001\\u90E8\\u7F72\\u3001\\u5927\\u89C4\\u6A21\\u7BA1\\u7406\\u4E0A\\u5408\\u4E0D\\u5408\\u9002\\u7B49\\uFF0C\\u5F88\\u591A\\u5F00\\u53D1\\u8005\\u5176\\u5B9E\\u90FD\\u5728\\u89C2\\u671B\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u548C Flutter \\u4E00\\u6837\\uFF0C\\u6211\\u8FD8\\u662F\\u5F88\\u770B\\u597D Deno \\u7684\\uFF0C\\u6BD5\\u7ADF\\u770B\\u7740\\u5C31\\u6709\\u5E0C\\u671B\\u7684\\u6837\\u5B50\\u5F88\\u96BE\\u4E0D\\u559C\\u6B22\\u8D77\\u6765\\uFF0C\\u4E5F\\u613F\\u610F\\u82B1\\u65F6\\u95F4\\u5C1D\\u8BD5\\u5E76\\u96C6\\u6210\\u5728\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u4E2D\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/move-miui-12-super-wallpaper-to-web/index.md","id":"7a4db9ef-9f76-5854-b2fa-b70aa7635e36","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。 这几天瞥到宣传图突发奇想，不就是个3D球吗？WEB 上好像也能实现，要不试试？ 预览可戳(16MB 左右，爪机慎点，源码在最后)：   超级火星 一、技术实现 整个内容包括俯瞰的一个视角、一个侧面部分视角、一个转场到目标位置的视角。 全部都是 3D 的内容，所以这块一定要用 Three.js…","fields":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","slug":"/blog/move-miui-12-super-wallpaper-to-web","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","date":"2020-07-02","redirects":null,"datetime":"2020-07-02 15:55:36","categories":["code"],"series":null,"tags":["Three.js","3D","Mars"],"status":"online"},"frontmatter":{"published":null,"tags":["Three.js","3D","Mars"],"theme":null,"slug":"move-miui-12-super-wallpaper-to-web","date":"2020-07-02 15:55:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"move-miui-12-super-wallpaper-to-web\",\n  \"title\": \"🌏 把 MIUI 12 的超级火星搬到 Web 上\",\n  \"date\": \"2020-07-02 15:55:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"Three.js\", \"3D\", \"Mars\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u5F53\\u521D MIUI 12 \\u53D1\\u5E03\\u65F6\\uFF0C\\u8D85\\u7EA7\\u58C1\\u7EB8\\u529F\\u80FD\\u7740\\u5B9E\\u770B\\u8D77\\u6765\\u7279\\u522B\\u7684\\u6709\\u611F\\u89C9\\uFF0C\\u4E4B\\u524D\\u5DF2\\u7ECF\\u7533\\u8BF7\\u5F00\\u53D1\\u7248\\u5185\\u6D4B\\uFF0C\\u7B2C\\u4E00\\u65F6\\u95F4\\u4F53\\u9A8C\\u4E0B\\u6765\\u6574\\u4E2A\\u684C\\u9762\\u5230\\u606F\\u5C4F\\u7684\\u52A8\\u753B\\u6D41\\u7545\\uFF0C\\u6700\\u540E\\u624B\\u673A\\u606F\\u5C4F\\u4E4B\\u540E\\u4E00\\u4E2A\\u706B\\u661F\\u5728\\u5C4F\\u5E55\\u4E0A\\u8FD8\\u662F\\u633A\\u9707\\u64BC\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1019px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.934362934362944%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EABQBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAYbuVInhDAg//8QAHBAAAQQDAQAAAAAAAAAAAAAAAQIDESEEEjEy/9oACAEBAAEFAkJ2JxqIgtcmnff/xAAYEQEAAwEAAAAAAAAAAAAAAAABAAMRIf/aAAgBAwEBPwGusTsTGf/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhH/2gAIAQIBAT8Bu2jT/8QAGxAAAgEFAAAAAAAAAAAAAAAAABEBECEycYH/2gAIAQEABj8CRnfQpO1//8QAGxABAAICAwAAAAAAAAAAAAAAAQAREDFBYXH/2gAIAQEAAT8hUxR3B08GGYKTGum9ynCf/9oADAMBAAIAAwAAABBX3//EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAwEBPxC2KmP/xAAWEQEBAQAAAAAAAAAAAAAAAAABEQD/2gAIAQIBAT8QQhii7//EABoQAQADAQEBAAAAAAAAAAAAAAEAETEhQaH/2gAIAQEAAT8QTAPVhDULmygP2Y0AkN88aNk9oBsuVjJ//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"miui 12\",\n    \"title\": \"miui 12\",\n    \"src\": \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg\",\n    \"srcSet\": [\"/static/cdec94a30383adbe2141fbdd573fab9e/fca29/miui-12-wallpaper.jpg 259w\", \"/static/cdec94a30383adbe2141fbdd573fab9e/f4507/miui-12-wallpaper.jpg 518w\", \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg 1019w\"],\n    \"sizes\": \"(max-width: 1019px) 100vw, 1019px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"miui 12\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u51E0\\u5929\\u77A5\\u5230\\u5BA3\\u4F20\\u56FE\\u7A81\\u53D1\\u5947\\u60F3\\uFF0C\\u4E0D\\u5C31\\u662F\\u4E2A3D\\u7403\\u5417\\uFF1FWEB \\u4E0A\\u597D\\u50CF\\u4E5F\\u80FD\\u5B9E\\u73B0\\uFF0C\\u8981\\u4E0D\\u8BD5\\u8BD5\\uFF1F\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u9884\\u89C8\\u53EF\\u6233(16MB \\u5DE6\\u53F3\\uFF0C\\u722A\\u673A\\u614E\\u70B9\\uFF0C\\u6E90\\u7801\\u5728\\u6700\\u540E)\\uFF1A\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://p.ubug.io/super-wallpaper/index.html\"\n  }, \"\\u8D85\\u7EA7\\u706B\\u661F\")), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"WEB \\u7248\\u672C\\u8D85\\u7EA7\\u58C1\\u7EB8\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    muted: true,\n    loop: true,\n    style: {\n      maxHeight: \"400px\",\n      maxWidth: \"100%\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/super-globe-web.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u6280\\u672F\\u5B9E\\u73B0\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"MIUI 12 \\u8D85\\u7EA7\\u58C1\\u7EB8\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    controls: true,\n    autoPlay: true,\n    muted: true,\n    loop: true,\n    style: {\n      maxHeight: \"400px\",\n      maxWidth: \"100%\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/super-globe-ori.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"p\", null, \"\\u6574\\u4E2A\\u5185\\u5BB9\\u5305\\u62EC\\u4FEF\\u77B0\\u7684\\u4E00\\u4E2A\\u89C6\\u89D2\\u3001\\u4E00\\u4E2A\\u4FA7\\u9762\\u90E8\\u5206\\u89C6\\u89D2\\u3001\\u4E00\\u4E2A\\u8F6C\\u573A\\u5230\\u76EE\\u6807\\u4F4D\\u7F6E\\u7684\\u89C6\\u89D2\\u3002\"), mdx(\"p\", null, \"\\u5168\\u90E8\\u90FD\\u662F 3D \\u7684\\u5185\\u5BB9\\uFF0C\\u6240\\u4EE5\\u8FD9\\u5757\\u4E00\\u5B9A\\u8981\\u7528 Three.js \\u4E86\\uFF0C\\u80FD\\u628A\\u6574\\u4E2A\\u5B9E\\u73B0\\u96BE\\u5EA6\\u964D\\u4F4E\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E00\\u548C\\u7B2C\\u4E8C\\u4E2A\\u89C6\\u89D2\\u53EA\\u9700\\u8981\\u5C06\\u8D34\\u56FE\\u8499\\u5728\\u7403\\u4E0A\\uFF0C\\u8BBE\\u7F6E\\u706F\\u5149\\u3001\\u65CB\\u8F6C\\u548C\\u89D2\\u5EA6\\u5E94\\u8BE5\\u5C31\\u80FD\\u5B9E\\u73B0\\u6574\\u4F53\\u6548\\u679C\\uFF0C\\u5728\\u8C03\\u6574\\u76F8\\u673A\\u548C\\u706F\\u5149\\u7684\\u4F4D\\u7F6E\\uFF0C\\u80FD\\u591F\\u5B9E\\u73B0\\u521D\\u6B65\\u7684\\u8F6C\\u573A\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u4E2A\\u89C6\\u89D2\\u5E94\\u8BE5\\u662F\\u72EC\\u7ACB\\u7684\\u573A\\u666F\\uFF0C\\u9700\\u8981\\u4E00\\u4E2A\\u5730\\u5F62\\u7ED3\\u6784\\u548C\\u8D34\\u56FE\\uFF0C\\u914D\\u5408\\u89C6\\u89D2\\u53D8\\u5316\\u7684\\u8F6C\\u573A\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u8D44\\u6E90\\u83B7\\u53D6\"), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u76F4\\u63A5\\u627E\\u8D44\\u6E90\\uFF0C\\u4E0D\\u8FC7\\u5148\\u4ECE\\u5B98\\u65B9\\u5B89\\u88C5\\u5305\\u62C6\\u5F00\\u770B\\u770B\\uFF0C\\u4F20\\u8BF4\\u6839\\u636E NASA \\u6570\\u636E\\u751F\\u6210\\u7684\\u706B\\u661F\\u6570\\u636E\\u6709\\u6CA1\\u6709\\u5728\\u91CC\\u9762\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u8F7D apk \\u5305\\uFF0C\\u7136\\u540E apktool \\u53CD\\u7F16\\u8BD1\\uFF0C\\u62FF\\u5230\\u57FA\\u672C\\u7684\\u76EE\\u5F55\\uFF0C\\u5927\\u6982\\u7FFB\\u7FFB\\u5404\\u4E2A\\u6587\\u4EF6\\u5939\\uFF0C\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u770B\\u770B\\u8FD9\\u4E2A\\u706B\\u661F\\u6570\\u636E\\u5728\\u54EA\\uFF1F\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Mars_Bright\\\\assets\\\\bin\\\\Data\"), \" \\u76EE\\u5F55\\u4E0B\\u627E\\u5230\\u4E86\\u70B9\\u4E1C\\u897F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"598px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.301158301158296%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABpUlEQVQoz3VSaW/CUAzr//89E4gB04ByrVDO7cO0AQUKlPsqN3g4Ix1CWqSozXu2E6c1zNcIEvEQki9hZM0Y0olnZFMxZJJRSdtKSVaK6WtmULJMlAvpW52+vpvBO9OwC1m814qolS3UKlbwrF+zWnpDPBpCNPKEip1HvVq41mFYeRMfN04uk0DZzgmWGOP76xOz2RyXywWn0wnn8zl48qzX66HVamEwGGCz2UjNZBB3n+QY3sCF72/wX7iui06nI4Ikse52u3LHho9hOE4LnudJV4KVMJ/PBaDnw+EQu90Oo9EouFPB9XqNyWTyK8juOgFTBReLhQD6/b5YpqDv+9J8tVoFNhnH41HORZAiFGBn7ogkBapl3SHvKMyakx8OB8Hs9/s/QU43nU6xXC5ldOajYLPZDD4KiWpfLfOcOBF0e/1AkLtRqwrmJI7jiAiJdEJx1uQwKM5aBNvtNpi6fO6HAA39bTjZdrsVYqPRCARomw24axEkgQU7a3ftrB/lfkJ+Ta6JWHUyHo+FJ4LszIKHJNE+f1AN3tHBvWWuRvdMrA7C+AGLiYJ+R7rU3QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"资源文件\",\n    \"title\": \"资源文件\",\n    \"src\": \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png\",\n    \"srcSet\": [\"/static/d39f0fe1de0296dd442ef65942633abb/2c191/mars-files.png 259w\", \"/static/d39f0fe1de0296dd442ef65942633abb/86b01/mars-files.png 518w\", \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png 598w\"],\n    \"sizes\": \"(max-width: 598px) 100vw, 598px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u8D44\\u6E90\\u6587\\u4EF6\"), \"\\n  \")), mdx(\"p\", null, \"\\u770B\\u5230\\u6709 unity \\u5173\\u952E\\u5B57\\uFF0C\\u6240\\u4EE5\\u5E94\\u8BE5\\u662F unity \\u6280\\u672F\\u5B9E\\u73B0\\uFF0C\\u7B80\\u5355\\u641C\\u7D22\\u4E0B\\u77E5\\u9053\\u8FD9\\u4E2A\\u6587\\u4EF6\\u5939\\u5C31\\u662F\\u8D44\\u6E90\\u6587\\u4EF6\\uFF0C\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/Perfare/AssetStudio\"\n  }, \"AssetStudio\"), \" \\u80FD\\u591F\\u67E5\\u770B\\u8FD9\\u4E9B\\u8D44\\u6E90\\u6587\\u4EF6\\uFF0C\\u5728 Windows \\u7535\\u8111\\u4E0A\\u4E0B\\u8F7D\\u8FD0\\u884C\\uFF0C\\u7136\\u540E\\u52A0\\u8F7D\\u6587\\u4EF6\\u5939\\uFF0C\\u770B\\u5230\\u5168\\u90E8\\u7684\\u8D44\\u6E90\\u5217\\u8868\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed1f059dc6992a393b3db062516da62c/43969/mars-assets.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.490347490347496%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACh0lEQVQozyWPeywUABzH72+phTyzELNqnnnNIqahSVr9gaV/WlutldY/NpstTuK8Oe44DnnMo3kTNkYkj12dVx5hju44z9Vh+vPTOb/ts+/3r89+X4FcXk9R2SdklS3IqlqR13RQWddFQ0s/jW2DyOt7qWrso6Z5gIbOYZq6R2npHaO9f4Luoe/0fZ1mYGKeYcUCw6NjCBSTI6wsTrEwp2Bp/gfzswqWF5Ro1n8xMtRHdUUZNVVyZJJCivJzKBXnUSotprREikyfMokYqTifooI8iovECNo6+2n7PE5Hzzd9jtLaNUJ7zxjaPR2DrQ1IYkOpfXqPykf+pAW78DbAHdnjMBqf3ac4JoyUqGDehfvy4a4P6ZH+CJRKJb/Vm2g2t1hTbbC8vMre7j6n96W+HImnMSW3LSkPtqDAx4woGyPiHY3IcTUmwcmI11eNyL55kTwvExKdzyGYnZni4GCf/b1dNjfVrK2tcnJ8aBCONcmpDjCj48k1BuLdqQq7gizQhgRXC0R+1iR6WRHtaEqujyU5vpYU6BHMTE+xva1lW6tFo9GwsbHO0aHOIBxprEDodoHCB040v3AjNegykfamhNqa8MrlEs/dzPHV9wg7E+KcTUnysEAwPa1kZ2fHID0VrqtUHOnOhOPNFSR7nueNqxm5t8xJ009+ecMEobcZIj1l4bbUPbRHGmJD8R0bcgKtzibrdH842N/Tf7mFRr3Bv5Njg3CyvQZxkDXScEeqYzyojfOnLtaPj9HeSCKuIwl1oDDEnrwQOyRhDpRFOCIYH59Eta5mdVXF4tIKcz8XUWu0/NUd093ZgTApkcw0IVmidESiDAPZmSKyMtIQvU8hIzWZdOEZp/0/fL7nel9Ktf0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"安装包资源解析\",\n    \"title\": \"安装包资源解析\",\n    \"src\": \"/static/ed1f059dc6992a393b3db062516da62c/0dc48/mars-assets.png\",\n    \"srcSet\": [\"/static/ed1f059dc6992a393b3db062516da62c/2c191/mars-assets.png 259w\", \"/static/ed1f059dc6992a393b3db062516da62c/86b01/mars-assets.png 518w\", \"/static/ed1f059dc6992a393b3db062516da62c/0dc48/mars-assets.png 1035w\", \"/static/ed1f059dc6992a393b3db062516da62c/43969/mars-assets.png 1049w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5B89\\u88C5\\u5305\\u8D44\\u6E90\\u89E3\\u6790\"), \"\\n  \")), mdx(\"p\", null, \"\\u6309\\u7167\\u5927\\u5C0F\\u6392\\u5E8F\\u540E\\u53D1\\u73B0\\u4E86 Mars8k \\u8FD9\\u4E2A\\u6587\\u4EF6\\uFF0C\\u6574\\u6574 50MB \\u7684\\u4E00\\u5F20 8k \\xD7 4k \\u7684\\u56FE\\u7247\\uFF0C\\u653E\\u5927\\u4E4B\\u540E\\u6E05\\u6670\\u5EA6\\u4E5F\\u5F88 ok\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u80FD\\u770B\\u5230\\u5176\\u4ED6\\u7684\\u8D44\\u6E90\\u8D34\\u56FE\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"752px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"26.25482625482626%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAdKMLwP/xAAYEAADAQEAAAAAAAAAAAAAAAABAhEAA//aAAgBAQABBQLuCVRHs3//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAABAAISECEjQlH/2gAIAQEABj8CETG6dk25T//EABkQAAIDAQAAAAAAAAAAAAAAAAABESFRMf/aAAgBAQABPyG0erQulhbmMLCGI//aAAwDAQACAAMAAAAQg8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRkf/aAAgBAQABPxAQcG2pWoixllg5W8+HHkLUCB6n/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"导出的其他资源\",\n    \"title\": \"导出的其他资源\",\n    \"src\": \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg\",\n    \"srcSet\": [\"/static/8614c24ba4507bb1331cec75fa2a22ac/fca29/mars-files2.jpg 259w\", \"/static/8614c24ba4507bb1331cec75fa2a22ac/f4507/mars-files2.jpg 518w\", \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg 752w\"],\n    \"sizes\": \"(max-width: 752px) 100vw, 752px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5BFC\\u51FA\\u7684\\u5176\\u4ED6\\u8D44\\u6E90\"), \"\\n  \")), mdx(\"p\", null, \"\\u5BFC\\u51FA\\u5168\\u90E8\\u8D44\\u6E90\\uFF0C\\u80FD\\u627E\\u5230\\u5730\\u6807\\u7684 obj \\u548C fbx \\u5F62\\u72B6\\u6587\\u4EF6\\u3001\\u8D34\\u56FE\\u6587\\u4EF6\\u7B49\\uFF0C\\u8FD9\\u6837\\u5C31\\u597D\\u529E\\u591A\\u4E86\\u3002\\u4E0D\\u8FC7\\u597D\\u50CF\\u6587\\u4EF6\\u90FD\\u592A\\u5927\\u4E86\\uFF0C\\u52A8\\u8F84\\u51E0\\u5341\\u5146\\uFF0C\\u8FD9\\u4E2A\\u540E\\u9762\\u4F18\\u5316\\u3002\"), mdx(\"h3\", null, \"\\u7D20\\u6750\\u5217\\u8868\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \" Mars8k.png \"), \" \\u661F\\u7403\\u8D34\\u56FE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \" mars1/mars1.fbx \"), \" \\u5730\\u9762\\u4E00\\u4E2A\\u70B9\\u7684\\u5730\\u5F62\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \" mars1/landscape6.png \"), \" \\u5730\\u5F62\\u7684\\u8D34\\u56FE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \" mars1/landscape6_n.png \"), \" \\u591C\\u95F4\\u5730\\u5F62\\u8D34\\u56FE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \" mars1/landsmid11.png \"), \" \\u653E\\u5927\\u8F6C\\u573A\\u7684\\u6548\\u679C\\u56FE\")), mdx(\"p\", null, \"\\u661F\\u7403\\u8D34\\u56FE\\u80FD\\u591F\\u76F4\\u63A5\\u8D34\\u5728\\u7403\\u4E0A\\uFF0C\\u7136\\u540E fbx \\u683C\\u5F0F\\u7684\\u6A21\\u578B\\u53EF\\u4EE5\\u88AB three.js \\u76F4\\u63A5\\u52A0\\u8F7D\\uFF0C\\u52A0\\u4E0A\\u8D34\\u56FE\\u5C31\\u884C\\uFF0C\\u5F00\\u641E\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u642D\\u5EFA\\u4FEF\\u77B0\\u548C\\u4FA7\\u9762\\u89C6\\u89D2\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u53EA\\u9700\\u8981 Mars8k.png \\u8FD9\\u4E2A\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u7528 react \\u505A\\u7B80\\u5355\\u7684 UI\\uFF0C\\u7136\\u540E\\u642D\\u5EFA\\u4E00\\u4E2A\\u57FA\\u672C\\u7684\\u4EE3\\u7801\\u6846\\u67B6\\uFF0C\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4EC5\\u5C55\\u793A\\u903B\\u8F91\\uFF0C\\u6587\\u7AE0\\u6700\\u540E\\u6709\\u6E90\\u7801\\u5730\\u5740\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4EE5\\u4E0B\\u90E8\\u5206\\u90FD\\u53EF\\u4EE5\\u5728 three.js \\u7F51\\u7AD9\\u7684 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://threejs.org/editor/\"\n  }, \"\\u5728\\u7EBF\\u7F16\\u8F91\\u5668\"), \" \\u4E0A\\u53EF\\u89C6\\u5316\\u642D\\u5EFA\\u3002\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import {\\n  Group,\\n  Mesh,\\n  MeshLambertMaterial,\\n  PerspectiveCamera,\\n  PointLight,\\n  Scene,\\n  SphereGeometry,\\n  WebGLRenderer,\\n  Vector3,\\n} from \\\"three\\\";\\n\\n// \\u521D\\u59CB\\u5316\\u6E32\\u67D3\\u5668\\nconst renderer = new WebGLRenderer({\\n  alpha: true,\\n  antialias: true,\\n  canvas: canvasElement,\\n});\\n\\n// \\u6DFB\\u52A0\\u5404\\u4E2A\\u90E8\\u4EF6\\nconst camera = new PerspectiveCamera();   // \\u76F8\\u673A\\nconst sunOrbit = new Group();             // \\u592A\\u9633\\u8F68\\u9053\\nconst globe = new Group();                // \\u5730\\u7403\\nconst globeSphere = new Mesh();           // \\u7403\\u4F53\\nconst scene = new Scene();                // \\u573A\\u666F\\n\\n// \\u52A0\\u4E2A\\u73AF\\u5883\\u5149\\u7528\\u6765\\u6D4B\\u8BD5\\nscene.add(new AmbientLight(\\\"white\\\", 5));\\n\\n// \\u5408\\u4F53\\nscene.add(sunOrbit);\\nglobe.add(globeSphere);\\nscene.add(camera);\\nscene.add(globe);\\n\\n// \\u6E32\\u67D3\\u90E8\\u5206\\nconst render = (): void => {\\n  renderer.render(scene, camera);\\n\\n  // TODO: \\u661F\\u7403\\u548C\\u592A\\u9633\\u7684\\u8FD0\\u884C\\n  // TODO: \\u76F8\\u673A\\u7684\\u8F6C\\u573A\\u66F4\\u65B0\\n}\\n\\n// \\u5FAA\\u73AF\\u5668\\nconst animate = (): void => {\\n  render();\\n  requestAnimationFrame(animate);\\n}\\n\\n// \\u76D1\\u542C\\u6267\\u884C resize \\u66F4\\u65B0\\u89C6\\u89D2\\u5927\\u5C0F\\uFF0C\\u8FD9\\u91CC\\u7565\\nconst viewPortChangeHandler = (): void => {\\n  renderer.setSize(window.innerWidth, window.innerHeight);\\n  camera.aspect = window.innerWidth / window.innerHeight;\\n  camera.updateProjectionMatrix();\\n}\\nwindow.addEventListener('resize', viewPortChangeHandler)\\nviewPortChangeHandler()\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u903B\\u8F91\\u5F88\\u7B80\\u5355\\u3002\"), mdx(\"h3\", null, \"1. \\u76F8\\u673A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u6D4B\\u8BD5\\u7528\\ncamera.position.set(300 * 4, 0, 0);\\ncamera.lookAt(0, 0, 0);\\n\\ncamera.fov = 45;          // \\u89C6\\u89D2\\u5E7F\\u5EA6\\ncamera.far = 300 * 10;    // \\u89C6\\u89D2\\u8FDC\\u70B9\\ncamera.near = 0.01;       // \\u89C6\\u89D2\\u8FD1\\u70B9\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e2042b95152f087fcc94e0d7dbba7f56/3a38f/step-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.73745173745174%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAA+0lEQVQoz5WSR27FMAxEfSV/995tGHC5/2kYPAGjCAmyyGLMYRuTkqLP52NCHMceSZJYmqZWFIU1TWPTNFnbtr6OvEBMPFJjnudW17V1Xeeat22z8zztui6779ve97XneWzfd1cn4VAM7gSXZbHjOBwQEQcIhJY8oKeqKgs3dBNCWIWJ5nl2oFhWfF1X78OpB2xTluX3hHxYdxxHl8SKD8PgfcVUI66fUYtOpFE5O4J933suXyCOVQ5hfM6Uy+MuIo1KQE2AY5AVVx4fkSzL/KqCFySpZp4JCEXxuQTW+ikSPqEofEc0hKJMIRHW+Uvkl6BE9Ra5tf+IhPgCIwlPjKaFa4MAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"视角（添加辅助网格，且参数不同）\",\n    \"title\": \"视角（添加辅助网格，且参数不同）\",\n    \"src\": \"/static/e2042b95152f087fcc94e0d7dbba7f56/0dc48/step-1.png\",\n    \"srcSet\": [\"/static/e2042b95152f087fcc94e0d7dbba7f56/2c191/step-1.png 259w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/86b01/step-1.png 518w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/0dc48/step-1.png 1035w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/3a38f/step-1.png 1131w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u89C6\\u89D2\\uFF08\\u6DFB\\u52A0\\u8F85\\u52A9\\u7F51\\u683C\\uFF0C\\u4E14\\u53C2\\u6570\\u4E0D\\u540C\\uFF09\"), \"\\n  \")), mdx(\"h3\", null, \"2. \\u7403\\u3001\\u8D34\\u56FE\\u548C\\u81EA\\u8F6C\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u8BBE\\u7F6E\\u5F62\\u72B6\\u548C\\u9876\\u70B9\\u6570\\nglobeSphere.geometry = new SphereGeometry(300, 100, 100);\\n// \\u6DFB\\u52A0\\u6750\\u8D28\\u548C\\u8D34\\u56FE\\nglobeSphere.material = new MeshLambertMaterial({\\n  map: new TextureLoader(manager).load('textures/Mars8K_web_low.jpg')\\n});\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2d864b7dab016fb0261ae79b98d9559b/06337/step-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.55984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABmUlEQVQoz21QOy8EURidnyFEgnhEWDu7e+fOnXvnznPHGlkhZBsF4lFrJBQSBb1SodKgVJMgoVAq9H7KMd/dh/Uoznzf3HvOuef7rFqtBkK1WkW3J7BOLdUYZhmH7TA4rNrh/q8hWP0XVCuVigF3bTDHxpacxsl8GS02BcctQ4gKGLN/mPX3Vr8Z5xxKSSipEMYKZ/EE7rIh3C4P4ToZwAYbQ5rNI0m00dDDv417CRljyLIM+cIC0kaO7abG49II7tcn8Xpg46E1jqtwEJt5jEZzEVm9DinlH+OeodYaaZoiiSPIMMHOosDzyihe9mbwdhjiaauEu3wY67GHII1RTxPDj6KoWIP4Tkgf13URBIExJfg6QD2WuFybxcepj8+LHO9HLs5X58xKokj3uKQLwxC+75uVWTSqUsocEDzPM1VpiUw72M/KuNnlOG7MIRIcQaSgfWnGJR6Zkr5rbpEBXVL97oksiqQeHCEhignc4lxSulAUBl4xpmdGpekIlI7CWV0jAhEI7X8SckiPF30bnLNiV8wIuzv7jS9HJjZ7CZ3mVAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"球和贴图(绿色是 Y 轴)\",\n    \"title\": \"球和贴图(绿色是 Y 轴)\",\n    \"src\": \"/static/2d864b7dab016fb0261ae79b98d9559b/0dc48/step-2.png\",\n    \"srcSet\": [\"/static/2d864b7dab016fb0261ae79b98d9559b/2c191/step-2.png 259w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/86b01/step-2.png 518w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/0dc48/step-2.png 1035w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/06337/step-2.png 1472w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7403\\u548C\\u8D34\\u56FE(\\u7EFF\\u8272\\u662F Y \\u8F74)\"), \"\\n  \")), mdx(\"p\", null, \"\\u81EA\\u8F6C\\u90E8\\u5206\\u5728 render \\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u6BCF\\u6B21\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u7ED5 y \\u8F74\\u65CB\\u8F6C 1/24\\xB0\\nglobeSphere.rotateY(Math.PI / 180 / 24);\\n\")), mdx(\"h3\", null, \"3. \\u592A\\u9633\\u548C\\u8F68\\u9053\"), mdx(\"p\", null, \"\\u592A\\u9633\\u662F\\u4E2A\\u70B9\\u5149\\u6E90\\uFF0C\\u8F68\\u9053\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A Group\\uFF0C\\u8BA9\\u592A\\u9633\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u7136\\u540E\\u8F68\\u9053\\u7ED5 x \\u8F74\\u65CB\\u8F6C\\u5373\\u53EF\\uFF0C\\u4E0D\\u9700\\u8981\\u592A\\u590D\\u6742\\u7684\\u8F68\\u9053\\u63A7\\u5236\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u5728\\u592A\\u9633\\u7684\\u8F68\\u9053\\u4E0A\\u6DFB\\u52A0\\u5149\\u6E90\\uFF0C\\u8FD9\\u6837\\u53EA\\u9700\\u8981\\u8F68\\u9053\\u65CB\\u8F6C\\u5373\\u53EF\\nconst sunLight = new PointLight(\\\"white\\\"); // \\u592A\\u9633\\nsunOrbit.add(sunLight)\\n\\n// \\u8FD9\\u6837\\u8F68\\u9053\\u5728 x \\u6B63\\u4E0A\\u65B9\\uFF0C\\u5149\\u6E90\\u4E0D\\u4F1A\\u88AB\\u906E\\u6321\\uFF0C\\u65CB\\u8F6C\\u53EF\\u4EE5\\u76F4\\u63A5\\u7ED5 x \\u8F74\\nsunOrbit.position.setX(300 * 2);\\n\\n// \\u8BBE\\u7F6E\\u592A\\u9633\\u7684\\u76F8\\u5BF9\\u4F4D\\u7F6E\\nsunLight.position.set(0, 300 * 3, 300 * 3);\\n// \\u8BBE\\u7F6E\\u5F3A\\u5EA6\\nsunLight.intensity = 3;\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"852px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABz0lEQVQoz5VSTY/TMBDtv+AABz6WhQXaxo6TTdrETdKktRPapt9IXNCKI4gfwIXTInFG4uc+xk42ilAvHJ4y9jhv3ryZgeu6+F9wzjGdThEEgY37ucGlx93Zxi3ae5M3KMsSUkowxi4T9omanxg4xQ5v8G9hwQVch966vCvSEfbJHMeBEAKefwuPqqe+gBQcjN6YHGMEh2HsjzGOx3BZQ9p00lNopBvMZjOczmcUicTHmyf4Hlzj8PY5dOghy3PKS0STCEFK/hXcqmwscW1HA6POEBmDjS8fiGy93SF59Rj36VP8zq7xjT/DV+81TrstDscj9vs99qcDZBZ3HvLWc6swSRKs12vUdY16syElCwQvH+FXeYWf0Qv8Sa7wQ95ALxVWqxWq6j2O5y0+fwoQ3Y6IlDw1XhqFWmtLVlWVRVlqQkXejHCXvcH9RuBLPMJBhlDUgVYKWiuUaod6ohBQqxF5q4dDMEMYRRHiOEaappjP5yiKAmq5REaxSwOQfIjQE3TOsVgsKL+AUtRBuMW7UTvlfssPwzAwftoJex7CMEREhYLJFDOyxBTLsgx5boiXtNhBt5v2y9uWLy32w6Cs4b0dM4V837fFhPC6e97b078nHG/9AU6/ygAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"太阳和轨道\",\n    \"title\": \"太阳和轨道\",\n    \"src\": \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png\",\n    \"srcSet\": [\"/static/fe90e1985e7dff0963f5afc18e6b44b9/2c191/step-4.png 259w\", \"/static/fe90e1985e7dff0963f5afc18e6b44b9/86b01/step-4.png 518w\", \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png 852w\"],\n    \"sizes\": \"(max-width: 852px) 100vw, 852px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u592A\\u9633\\u548C\\u8F68\\u9053\"), \"\\n  \")), mdx(\"p\", null, \"\\u8F68\\u9053\\u8FD0\\u884C\\u53EF\\u4EE5\\u5728 render \\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u6BCF\\u6B21\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u7ED5 x \\u65CB\\u8F6C 1/24\\xB0\\nsunOrbit.rotateX(Math.PI / 180 / 24)\\n\")), mdx(\"h3\", null, \"4. \\u8F6C\\u573A\"), mdx(\"p\", null, \"\\u8F6C\\u573A\\u5C31\\u662F\\u628A\\u76F8\\u673A\\u89C6\\u89D2\\u79FB\\u52A8\\u5230\\u661F\\u7403\\u5DE6\\u4E0A\\u89D2\\uFF0C\\u7136\\u540E\\u5C06\\u592A\\u9633\\u5149\\u79FB\\u52A8\\u5230\\u89C6\\u89D2\\u4E0A\\u65B9\\uFF0C\\u6240\\u4EE5\\u8FC7\\u7A0B\\u5C31\\u662F\\u4E24\\u4E2A\\u7269\\u4F53\\u7684\\u4E24\\u4E2A\\u72B6\\u6001\\u5207\\u6362\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u7528\\u5230 TWEEN\\uFF0C\\u7528\\u6765\\u505A\\u52A8\\u753B\\u8FC7\\u7A0B\\u4E2D\\u503C\\u7684\\u8FC7\\u6E21\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import TWEEN from \\\"@tweenjs/tween.js\\\";\\n\\n// \\u4FDD\\u5B58\\u8FC7\\u6E21\\u524D\\u540E\\u7684\\u592A\\u9633\\u89D2\\u5EA6\\nconst lastSunOrbitRotate = 0\\n\\n// \\u592A\\u9633\\u90E8\\u5206 \\u2193\\nlastSunOrbitRotate = sunOrbit.rotation.x;\\nconst sunOrbitTween = new TWEEN.Tween({ x: lastSunOrbitRotate });\\n// \\u66F4\\u65B0\\u8FC7\\u7A0B\\u4E2D\\u628A\\u4E2D\\u95F4\\u503C\\u6DFB\\u52A0\\u5230\\u7269\\u4F53\\u4E0A\\nsunOrbitTween.onUpdate((o: {x: number}) => {\\n  sunOrbit.setRotationFromAxisAngle(new Vector3(1, 0, 0), o.x);\\n});\\n// \\u8FC7\\u6E21\\u5230 0 \\u89D2\\u5EA6\\nsunOrbitTween.to({ x: 0 }, 3000).start();\\n\\n// \\u76F8\\u673A\\u90E8\\u5206\\u9700\\u8981\\u8003\\u8651\\u4F4D\\u7F6E\\u53EF\\u770B\\u7684\\u65B9\\u5411 \\u2193\\nconst before = {\\n  pos: { x: 300 * 4, y: 0, z: 0 },\\n  look: { x: 0, y: 0, z: 0 },\\n}\\nconst after = {\\n  pos: { x: 300 * 2.5, y: 300 / 8, z: 300 / 2 },\\n  look: { x: 300, y: 300 / 8, z: 300 / 2 },\\n}\\nconst cameraPosAtTween = new TWEEN.Tween({ ...before.pos });\\ncameraPosAtTween.onUpdate((o: XYZ) => camera.position.set(o.x, o.y, o.z))\\ncameraPosAtTween.to({ ...after.pos }, 300).start();\\n\\nconst cameraLookAtTween = new TWEEN.Tween({ ...before.look });\\ncameraLookAtTween.onUpdate((o: XYZ) => camera.lookAt(o.x, o.y, o.z));\\ncameraLookAtTween.to({ ...after.look }, 300).start();\\n\")), mdx(\"p\", null, \"\\u81F3\\u6B64\\uFF0C\\u80FD\\u5B9E\\u73B0\\u706B\\u661F\\u9633\\u5149\\u7684\\u7167\\u5C04\\u6548\\u679C\\uFF0C\\u7136\\u540E\\u6DFB\\u52A0\\u706B\\u661F\\u81EA\\u8F6C\\u3001\\u6DFB\\u52A0\\u592A\\u9633\\u7ED5\\u7740\\u706B\\u661F\\u65CB\\u8F6C\\uFF0C\\u7136\\u540E\\u5C06\\u89C6\\u89D2\\u548C\\u592A\\u9633\\u89D2\\u5EA6\\u5728\\u4E24\\u4E2A\\u72B6\\u6001\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u4E5F\\u5C31\\u80FD\\u5B9E\\u73B0\\u6700\\u57FA\\u672C\\u7684\\u529F\\u80FD\\u4E86\\uFF0C\\u518D\\u52A0\\u4E0A\\u4EBF\\u70B9\\u7EC6\\u8282\\uFF0C\\u80FD\\u591F\\u57FA\\u672C\\u5B9E\\u73B0\\u8D85\\u7EA7\\u58C1\\u7EB8\\u7684\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u7B2C\\u4E09\\u4E2A\\u573A\\u666F\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u4E86\\u661F\\u7403\\u7684\\u6548\\u679C\\uFF0C\\u90A3\\u4E48\\u964D\\u843D\\u5230\\u5177\\u4F53\\u7684\\u5730\\u65B9\\u5462\\uFF1F\"), mdx(\"h3\", null, \"1. \\u573A\\u666F\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u8FD9\\u4E24\\u4E2A\\u573A\\u666F\\u9996\\u5148\\u505A\\u5728\\u540C\\u4E00\\u4E2A\\u573A\\u666F\\u4E2D\\u6709\\u70B9\\u56F0\\u96BE\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u5730\\u70B9\\u5982\\u679C\\u5B9E\\u9645\\u653E\\u5230\\u661F\\u7403\\u7684\\u67D0\\u4E2A\\u4F4D\\u7F6E\\uFF0C\\u8BA9\\u76F8\\u673A\\u53BB\\u653E\\u5927\\uFF0C\\u5148\\u4E0D\\u8BF4\\u6548\\u679C\\u600E\\u4E48\\u6837\\uFF0C\\u5149\\u7EBF\\u7684\\u90E8\\u5206\\u4E0D\\u592A\\u597D\\u5B89\\u6392\\uFF0C\\u52A0\\u4E0A\\u6574\\u4E2A\\u5C3A\\u5EA6\\u548C\\u5355\\u4F4D\\u90FD\\u4E0D\\u592A\\u597D\\u6574\\uFF0C\\u6240\\u4EE5\\u5E76\\u6CA1\\u6709\\u8FD9\\u4E48\\u505A\\uFF0C\\u4E0D\\u8FC7\\u6280\\u672F\\u4E0A\\u5E94\\u8BE5\\u662F\\u53EF\\u4EE5\\u5B9E\\u73B0\\u7684\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u9879\\u76EE\\u7528\\u5230\\u7684\\u65B9\\u6CD5\\u662F\\u628A\\u5730\\u9762\\u7684\\u6A21\\u578B\\u653E\\u5230\\u4E86\\u53E6\\u4E00\\u4E2A\\u573A\\u666F\\u4E2D\\uFF0C\\u7136\\u540E\\u4ECE dom \\u4E0A\\u6765\\u5904\\u7406\\u5207\\u6362\\u8FC7\\u7A0B\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u5148\\u5B9E\\u73B0\\u7B2C\\u4E09\\u4E2A\\u573A\\u666F\\u3002\"), mdx(\"h3\", null, \"2. \\u6A21\\u578B\\u548C\\u8D34\\u56FE\"), mdx(\"p\", null, \"\\u4ECE\\u539F\\u6765\\u7684\\u8D44\\u6E90\\u4E2D\\u5BFC\\u51FA\\u6765\\u7684\\u662F fbx \\u7684\\u683C\\u5F0F\\uFF0CThree.js \\u80FD\\u591F\\u76F4\\u63A5\\u52A0\\u8F7D\\uFF0C\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { FBXLoader } from \\\"three/examples/jsm/loaders/FBXLoader\\\";\\n\\n/* \\n  fbx \\u91CC\\u9762\\u5305\\u542B\\u8D34\\u56FE\\u7684\\u8D44\\u6E90\\u5F15\\u7528\\uFF0C\\u6240\\u4EE5\\u5FC5\\u987B\\u5C06 \\n    textures/landscape6.png\\n    textures/landscape6_n.png\\n    textures/landsmid11.png\\n    textures/Default-ParticleSystem.png\\n  \\u8FD9\\u51E0\\u4E2A\\u6587\\u4EF6\\u4E5F\\u653E\\u5728\\u540C\\u4E00\\u7EA7\\u76EE\\u5F55\\uFF0C\\u4E0D\\u7136\\u4F1A\\u62A5 404\\uFF0C\\u5E76\\u4E14\\u6CA1\\u6709\\u8D34\\u56FE\\n*/\\n\\nnew FBXLoader().load('textures/mars1.fbx', (model: Group) => {\\n  scene.add(model)\\n})\\n// \\u52A0\\u4E2A\\u73AF\\u5883\\u5149\\u7528\\u6765\\u6D4B\\u8BD5\\nscene.add(new AmbientLight(\\\"white\\\", 5));\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/973ad67091767095c3feef2340efe424/b0b21/step-5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"35.13513513513513%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAABZklEQVQoz02QS07DMBCGcwlOgITEQ1UTJ7aT+JUm6ZMqTVuVigrBqhJsWCAhgdhyAE78M05bqYtPMx6PP48dcB7ihJR9in0knCEMe3iocgynBViWIE01lDXIlQAXrOs7ECJJog7GIgScR1RkJOPUKOlgBpVbTI3DdzvE79sWr7sGz4sWm3mD+/EMdVXDGAOlUggRH6WHoQK/URQFnCsgU0eyGjc9gUoKtDxBcXkBHUaoWYJlFmNFwtLW0KpArgtY6wiDLDvIA6UUFWxXVNrAqAF2oyGGtqQbDe6uI4SRxtWtwswN8LnfY9WsSaio33aTOueOYuufzOGlnjzPYSl+LKf4e1nha9vi53GF/WKOSTXGZNJg3SxQlSX9pTpIz9BaI4jjmP4tpZGzTigoL7XC+3KOj02Lp9kYI0fT056Ukv5ZdPH8jMfnnoAxRm8X3cI3eRJa58rQjRYx5ZwE8sip58Sp5qMf7h+7sfG599GbcAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"降落地的地形和贴图\",\n    \"title\": \"降落地的地形和贴图\",\n    \"src\": \"/static/973ad67091767095c3feef2340efe424/0dc48/step-5.png\",\n    \"srcSet\": [\"/static/973ad67091767095c3feef2340efe424/2c191/step-5.png 259w\", \"/static/973ad67091767095c3feef2340efe424/86b01/step-5.png 518w\", \"/static/973ad67091767095c3feef2340efe424/0dc48/step-5.png 1035w\", \"/static/973ad67091767095c3feef2340efe424/b0b21/step-5.png 1394w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u964D\\u843D\\u5730\\u7684\\u5730\\u5F62\\u548C\\u8D34\\u56FE\"), \"\\n  \")), mdx(\"p\", null, \"\\u89C6\\u89D2\\u843D\\u4E0B\\u3001\\u504F\\u79FB\\u3001\\u65CB\\u8F6C\\u7684\\u90E8\\u5206\\uFF0C\\u548C\\u4E4B\\u524D\\u76F8\\u4F3C\\uFF0C\\u8BBE\\u7F6E\\u597D\\u53C2\\u6570\\u548C\\u8FC7\\u6E21\\u5373\\u53EF\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u518D\\u5570\\u55E6\\uFF0C\\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u6E90\\u7801\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u6A21\\u578B\\u3001\\u8D34\\u56FE\\u4F18\\u5316\\u548C\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"h3\", null, \"\\u8D34\\u56FE\\u5927\\u5C0F\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u6548\\u679C\\u4E4B\\u540E\\uFF0C\\u5982\\u679C\\u8981\\u653E\\u5230 web \\u4E0A\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E2A\\u5F88\\u4E25\\u91CD\\u7684\\u95EE\\u9898\\u5C31\\u662F\\u8D44\\u6E90\\u5927\\u5C0F\\u3002\\u4E00\\u4E2A\\u661F\\u7403\\u56FE 50MB \\u5728\\u672C\\u5730\\u8C03\\u8BD5\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u653E\\u5230\\u7EBF\\u4E0A\\u662F\\u4E00\\u5B9A\\u4E0D\\u53EF\\u80FD\\u63A5\\u53D7\\u7684\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"png \\u8D34\\u56FE\\u8F6C\\u4E3A jpg\\uFF08\\u6216\\u8005\\u66F4\\u597D\\u7684 basis \\u683C\\u5F0F\\uFF09\\uFF0C\\u7136\\u540E\\u54C1\\u8D28\\u8BBE\\u4E3A 60% \\u6216\\u8005\\u80FD\\u63A5\\u53D7\\u7684\\u7A0B\\u5EA6\\uFF0C\\u53EA\\u770B\\u6548\\u679C\\u7684\\u8BDD\\uFF0C50MB \\u538B\\u7F29\\u5230 4.94MB \\u6700\\u540E\\uFF0C\\u5E76\\u6CA1\\u6709\\u5F88\\u5F71\\u54CD\\u89C2\\u611F\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u88C1\\u526A\\u4E0D\\u9700\\u8981\\u7684\\u6A21\\u578B\\u548C\\u8D34\\u56FE\\uFF0C\\u4F8B\\u5982\\u5176\\u4E2D\\u4E00\\u4E9B\\u6A21\\u578B\\u7684\\u8D34\\u56FE\\u5E76\\u4E0D\\u9700\\u8981\\uFF0C\\u90A3\\u4E48\\u53EF\\u4EE5\\u4ECE\\u6A21\\u578B\\u4E2D\\u76F4\\u63A5\\u5220\\u9664\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6700\\u540E\\u662F\\u5728 three.js/editor \\u4E2D\\u505A\\u4E00\\u70B9\\u7B80\\u5355\\u7684\\u538B\\u7F29\\u548C\\u9876\\u70B9\\u5904\\u7406\\u3002\")), mdx(\"h3\", null, \"fbx \\u6A21\\u578B\\u8D34\\u56FE\\u95EA\\u70C1\\u95EE\\u9898\"), mdx(\"p\", null, \"fbx \\u5B9E\\u73B0\\u4E4B\\u540E\\uFF0C\\u6548\\u679C\\u8FD8\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u8D34\\u56FE\\u4E00\\u90E8\\u5206\\u533A\\u57DF\\u51FA\\u73B0\\u95EA\\u70C1\\u7684\\u60C5\\u51B5\\uFF0C\\u53EF\\u80FD\\u662F\\u56E0\\u4E3A\\u540E\\u7EED\\u53D8\\u66F4\\u6750\\u8D28\\u7684\\u539F\\u56E0\\uFF0C\\u603B\\u4E4B\\u6548\\u679C\\u5F88\\u5DEE\\uFF0C\\u6700\\u540E\\u4F7F\\u7528 three.js/editor \\u8F6C\\u6362\\u6210\\u4E86 glTF \\u6A21\\u578B\\uFF0C\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u6548\\u679C\\uFF0C\\u751A\\u81F3\\u5C06\\u8D34\\u56FE\\u76F4\\u63A5\\u5D4C\\u5165\\u6A21\\u578B\\u6587\\u4EF6\\u4E2D\\u5B9E\\u73B0\\u66F4\\u5C0F\\u7684\\u4E8C\\u8FDB\\u5236\\u6587\\u4EF6\\u3002\"), mdx(\"h3\", null, \"glTF \\u6A21\\u578B\\u7684\\u989C\\u8272\\u7A7A\\u95F4\"), mdx(\"p\", null, \"\\u8F6C\\u6210 glTF \\u6A21\\u578B\\u4E4B\\u540E\\uFF0C\\u95EA\\u70C1\\u95EE\\u9898\\u89E3\\u51B3\\u4E86\\uFF0C\\u4F46\\u662F\\u989C\\u8272\\u5DEE\\u522B\\u7279\\u522B\\u5927\\uFF0C\\u4EE5\\u4E3A\\u662F\\u6750\\u8D28\\u95EE\\u9898\\u3001\\u5149\\u7EBF\\u95EE\\u9898\\u7B49\\uFF0C\\u8C03\\u8BD5\\u5F88\\u4E45\\u4E4B\\u540E\\u624D\\u53D1\\u73B0 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader\"\n  }, \"\\u5B98\\u7F51\\u6587\\u6863 glTF\"), \" \\u8BF4\\u7684\\u989C\\u8272\\u7A7A\\u95F4\\u95EE\\u9898\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"renderer.outputEncoding = THREE.sRGBEncoding;\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1024px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"88.8030888030888%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAASABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUEA//EABcBAQEBAQAAAAAAAAAAAAAAAAIBAAP/2gAMAwEAAhADEAAAAZmudoKpuDWRoKbIHT//xAAbEAACAgMBAAAAAAAAAAAAAAABAgARAzEyIv/aAAgBAQABBQJNr6liLdISjAWF7ybXn//EABYRAQEBAAAAAAAAAAAAAAAAABAhQf/aAAgBAwEBPwGGH//EABURAQEAAAAAAAAAAAAAAAAAACAh/9oACAECAQE/AaP/xAAaEAACAgMAAAAAAAAAAAAAAAAAARARAiIx/9oACAEBAAY/ArxFXTZzYoR//8QAHRAAAgICAwEAAAAAAAAAAAAAAAEhMRFBEGGhgf/aAAgBAQABPyG2Jd7MPrN4Gx0tRA0WI0PiVOy6Jno4PMj/2gAMAwEAAgADAAAAEDzXw//EABkRAAMAAwAAAAAAAAAAAAAAAAABERAhQf/aAAgBAwEBPxCtuFT5gj//xAAaEQACAgMAAAAAAAAAAAAAAAAAEQEQMUFR/9oACAECAQE/EFgKem6//8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFBUXGhsfD/2gAIAQEAAT8QDQFWAWLoYxFKO2DziJAsNarO3G5u7kupQA4racbi1LG8T1f2Ymof3cE//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"颜色空间问题\",\n    \"title\": \"颜色空间问题\",\n    \"src\": \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg\",\n    \"srcSet\": [\"/static/87040a9731b3c27d3976e25cbb09dbc1/fca29/output-encoding.jpg 259w\", \"/static/87040a9731b3c27d3976e25cbb09dbc1/f4507/output-encoding.jpg 518w\", \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg 1024w\"],\n    \"sizes\": \"(max-width: 1024px) 100vw, 1024px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u989C\\u8272\\u7A7A\\u95F4\\u95EE\\u9898\"), \"\\n  \")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u6700\\u540E\\u7684\\u6E90\\u7801\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u5C1D\\u8BD5\\u548C\\u5904\\u7406\\uFF0C\\u6BD4\\u6587\\u7AE0\\u8FD9\\u4E00\\u70B9\\u4EE3\\u7801\\u6709\\u5F88\\u591A\\u4E0D\\u540C\\uFF1A\"), mdx(SourceCodeLink, {\n    url: \"https://cnb.cool/ubug/super-globe/super-globe\",\n    name: \"super-globe\",\n    desc: \"move miui 12 super wallpaper to web\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}